6、ant design form表單校驗的兩種方式

1)方式一：js 監聽blur事件
  <a-form-item
          class="ef-item ef-i-w50"
          label="負責人"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="請輸入負責人姓名" @blur="validatePrincipalName" v-decorator="['principalName', {rules: [{required: true, message: '請輸入負責人姓名！'}]}]" />
 </a-form-item>
 
methods:{
 //校驗負責人
      validatePrincipalName(e){
        var Reg=/^[\u2E80-\u9FFF]+$/;//Unicode編碼中的漢字范圍
        var value=e.target.value
        var ifMatch=Reg.test(value)
        var errArr;
        //沒值
        if(!value){
          errArr=[
            {
              message: '請輸入負責人姓名!',
              field: 'principalName',
            }
          ]
        }else{
          //有值
           if(!ifMatch){
             errArr=[
              {
                message: '姓名輸入不合法!',
                field: 'principalName',
              }
             ]
           }
        }
        this.form.setFields({ principalName: { value: e.target.value, errors: errArr } })

      },

}
   


2）方式二：直接在標簽上添加校驗
 <a-input
    allow-clear
    placeholder="請輸入姓名"
    v-decorator="['peopleName',
    { rules: [{ 
      required: true, 
      validator: (rule, value, callBack)=>{
        var Reg=/^[\u2E80-\u9FFF]+$/;//Unicode編碼中的漢字范圍
        if(!value){
          callBack('請輸入姓名')
        }else if(!Reg.test(value)) {
          callBack('姓名格式有誤')
        }
        callBack()
      } 
    }],initialValue:item.initData.peopleName }]"
    style="margin-right: 10px;"
    @change="changeFun($event,index,'peopleName')"

  />