element-ui中Form表单使用自定义验证规则

1.定计算属性来实现验证规则

        当前有一个需求，就是我点击了某个radio单选按钮，才会有验证表单规则，如果我选择无，则验证规则为空。

       下面为两个按钮：

<el-radio v-model="statusCode" label='none'>无</el-radio>
<el-radio v-model="statusCode" label='exist'>验证码</el-radio>

        验证规则写在在表单的form-item中：

<el-form :model="formCode" ref="froms" label-width="140px" >
    <el-form-item label="验证码：" prop="codeKey" :rules="codeRules">
    </el-form-item>
</el-form>

       codeRules是computed中的计算属性

2.首先我们根据radio的返回值，在computed的属性中进行判断

        计算属性中的书写：

    codeRules(){
      //判断当前的单选按钮的值
      if(this.statusCode == 'exist'){
        //填写自定义的验证规则
        let valid=(rule,value,callback)=>{
            //使用正则表达式
            let reg= /^[A-Za-z0-9]{4,4}$/
            if(!reg.test(value)){callback(new Error('密码必须是由4位字母+数字组合'))
            }else{
                callback()
            }
        };
        //将定义的规则返回
        return [
          { required: true, message: '验证码不能未空', trigger: 'blur'},
          {  validator: valid, message: '验证码为4位的数字或字母' ,trigger: 'blur'}
        ]
      }else{
        //没有规则
        return []
      }
    },

最后我们在切换的时候，就可以根据不同的单选按钮来匹配不同的验证规则