表单中需要很多验证，有时某项不是必须项，但是如果填写的必须遵守某种规则，所以就总结一下，比如手机号不是必须项，但是如果填写了必须遵守正则规则：

 <a-formlayout="horizontal":form="form":labelCol="{ span: 4 }":wrapperCol="{ span: 18 }"><a-row><a-col :md="24" :sm="24"><a-form-item label="用户名"><a-input  v-decorator="['userName',{rules: [{required: true, message: '请输入用户名'},{validator: validateName}]}]" /></a-form-item></a-col></a-row><a-row><a-col :md="24" :sm="24"><a-form-item label="密码"><a-input  type="password" v-decorator="['password', {rules: [{required: true, message: '请输入密码'},{validator: validateToNextPassword}]}]" /></a-form-item></a-col></a-row><a-row><a-col :md="24" :sm="24"><a-form-item  label="确认密码"><a-input  type="password" v-decorator="['ackPassword', {rules: [{required: true, message: '请输入确认密码'},{validator: compareToFirstPassword}]}]" /></a-form-item></a-col></a-row><a-row><a-col :md="24" :sm="24"><a-form-item label="邮箱"><a-input v-decorator="['email', {rules: [{required: false, message: '请输入邮箱'},{validator: validateEmail}]}]" /></a-form-item></a-col></a-row><a-row><a-col :md="24" :sm="24"><a-form-item label="手机号"><a-input v-decorator="['phoneNumber', {rules: [{required: false, message: '请输入手机号'},{validator:validateTelePhone}]}]" /></a-form-item></a-col></a-row><a-row><a-col :md="24" :sm="24"><a-form-item :wrapperCol="{ offset: 12 }"><a-button:loading="loading":disabled="disabled"size="large"@click="submit()"type="primary">注册</a-button></a-form-item></a-col></a-row></a-form>

验证的方法：

 validateName(rule, value, callback){const ruleStr1= /^[a-z]{6,}$/  if(value && ruleStr1.test(value)){checkUser({username:value}).then(res=>{const {code,message,data} = res.dataif(code==200 && !data){console.log('checkuser',code)callback()}else{callback('用户名已存在')}}).catch(()=>{callback('用户名已存在')})}else{callback('请输入由至少6位小写字母组成的用户名')}},validateEmail (rule, value, callback) {  const form = this.form;  const ruleStr= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/if(value){ // 有输入if (ruleStr.test(value)) {   checkEmail({email:value}).then(res=>{const {code,message,data} = res.dataif(code==200 && !data){callback()}else{callback('邮箱已存在')}}).catch(()=>{callback('邮箱已存在')})  }else{callback('请输入正确的邮箱地址'); }}else{ // 无输入callback()}},validateTelePhone(rule, value, callback){const ruleStr2= /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/if(value){ // 有输入if(ruleStr2.test(value)){checkPhone({phone:value}).then(res=>{const {code,message,data} = res.dataif(code==200 && !data){callback()}else{callback('手机号已存在')}}).catch(()=>{callback('手机号已存在')})  }else{callback('请输入正确的手机号')}}else{ // 无输入callback()}},validateToNextPassword  (rule, value, callback) {  const form = this.form;  const ruleStr= /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])[a-zA-Z0-9!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]{8,}$/console.log(ruleStr.test('Admin!@#456'))if (value && ruleStr.test(value)) {  form.validateFields(['ackPassword'], { force:true });  callback();  }else{callback('密码必须由字母、数字、特殊符号组成，长度为6-18个字符');  }  },compareToFirstPassword  (rule, value, callback) {  const form = this.form;  if (value && value !== form.getFieldValue('password')) {  callback('两次密码需要一样');  }else{  callback();} },