element ui中的表单正则校验

element ui官方使用手册里面对于表单正则描述得已经很详细了
https://element.eleme.io/#/zh-CN/component/form
一般正常使用是ok的

         
            
                
                    
                
                
                    
                
                
                    
                        同意
                        拒绝
                    
                
                
                    
                
            
            
                取 消
                确定
            
        
    
        data() {
            let validateReason = (rule, value, callback) => {
                if(!this.testData.status && !value){
                    callback(new Error('请输入拒绝原因'))
                }
                callback()
            }
           return {
                testDialog: true,
                testRule: {
                    email: [
                        {required: true, message:'请输入', trigger: 'blur'},
                        {pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,message: '请輸入正确的格式', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    reason: [
                        {required: false, message: '请填写驳回原因', trigger: 'blur', validator: validateReason},
                        {min: 0, max: 50, message: '驳回原因50个字之内', trigger: 'blur'}
                    ],
                },
                testData: {
                    status: 1,
                    reason: '',
                    email: '',
                    mobile: ''
                },
           }
        },

[email protected]

[email protected]

主要是根据上面的代码说几个点
1、一般简单的正则可以直接在下面通过pattern加入正则校验，比如邮箱
如果是需要根据特定条件的，比如这儿的拒绝原因则是需要在拒绝状态下才是必填，那么就可以通过validator实现，
这儿还要注意必须要有callback()否则会出现校验都通过但是执行不了alert('ok')的情况

this.$refs[formName].validate((valid) => {
    if (valid) { 
        alert('ok!);
    } else {
        console.log('no');
        return false;
    }
 });

2、有时候需求是希望在提交的时候才去校验，不需要提示的红色文字，只是要求前面必须带有必填标记*，那么这个时候只需要给它手动添加class="is-required"就可以了
3、在tab切换或控制不同条件下字段显隐藏这些场景时，会发现这个时候表单会自动校验，还没有开始输入就已经整个表单做了校验

              this.$nextTick(()=>{
                    this.$refs['testData'].clearValidate()
                })

只需要在切换中加入这段代码就可以解决
切换时内容还未填写但是已经自动验证并显示红色提示文字的情况