表單的部分目前只有針對不能為空白做驗證,這部分需要做到最佳化就要調整一下,在ElementUI-Form-Validation中使用rules做驗證規則

在src/views/modules/product/brand-add-or-update.vue中要針對排序和首字母做其他驗證規則,先對排序的部分輸入需為數字,在v-model中使用number表示輸入為數字

      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>

並且在這一部分的dataRule中針對特定的欄位寫驗證規則

        firstLetter: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("搜尋首字母不能為空白"));
              } else if (!/^[a-zA-Z]$/.test(value)) {
                callback(new Error("搜尋首字母必須是單個英文字母"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: "blur",
          },
        ],
        sort: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("排序不能為空白"));
              } else if (!Number.isInteger(value) || value < 0) {
                callback(new Error("排序數字必須大於等於0"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: "blur",
          },
        ],

驗證規則中,標示為空白驗證的時候需要使用嚴格比較(value === “")否則當輸入0的時候依然會判斷為空白

這樣就將驗證規則完成了