Ant Design of Vue表單自定義驗證validator

1.表單驗證

 1.1rule用法

注意：表單必須綁定rules驗證規則才能生效

在data中聲明rules校驗規則，具體規則可以查詢文檔，這裡重點說下自定義校驗validator

1.2validator用法

 validator驗證器，可以對格式進行複雜限制，跟rule一樣需要設定對應表單項的prop屬性，然後綁定validator，validator綁定驗證規則變量（注意驗證規則變量是處在data的return外面）。且需要注意的是callback回調函數一定要被調用

<a-modal :width="700" title="添加節目" :visible="addvisible" :confirm-loading="confirmLoading" centered
      @ok="submitForm('dynamicValidateForm')" @cancel="resetForm('dynamicValidateForm')">
      <a-form-model ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel" :rules="rules">
        <a-form-model-item v-bind="layout" label="節目名稱" prop="programName">
          <a-input style="width: 60%" v-model="dynamicValidateForm.programName" placeholder="請輸入節目名稱" />
        </a-form-model-item>
        <a-form-model-item v-bind="layout" label="螢幕數" prop="screenCount">
          <a-input style="width: 60%" v-model="dynamicValidateForm.screenCount" placeholder="請輸入顯示螢幕數" />
        </a-form-model-item>

</a-modal>

 data () {
    //節目名稱校驗
    var checkProgramName=(rule, value, callback)=>{
      this.proData.forEach(item=>{
        if(item.programName==value){
          callback(new Error("節目名稱已存在,請修改名稱後進行添加！"))
        }
      })
      if(value==""){
          callback(new Error("節目名稱無效，請修改名稱後進行添加！"))
      }
      callback()
    };
           

1.3整體代碼

data () {
    //節目名稱校驗
    var checkProgramName=(rule, value, callback)=>{
      this.proData.forEach(item=>{
        if(item.programName==value){
          callback(new Error("節目名稱已存在,請修改名稱後進行添加！"))
        }
      })
      if(value==""){
          callback(new Error("節目名稱無效，請修改名稱後進行添加！"))
      }
      callback()
    };
    return {
      //節目名稱校驗
      rules:{
        programName: [
            { required: true, validator:checkProgramName, trigger: 'blur'},
          ],
      },