antd 表单各种验证

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

 <a-form
        layout="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.data
            if(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.data
              if(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.data
              if(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();
        } 
    },