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