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')"

  />