element ui中的表单正则校验

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

         <el-dialog title="测试表单正则" ref="testData" width="600px"  :visible.sync="testDialog" :close-on-click-modal="false" >
            <el-form ref="testDataForm" :model="testData" label-width="130px" :rules="testRule">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="testData.email"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="mobile" class="is-required">
                    <el-input v-model.number="testData.mobile"></el-input>
                </el-form-item>
                <el-form-item label="选择" prop="status">
                    <el-radio-group v-model="testData.status">
                        <el-radio :label="1">同意</el-radio>
                        <el-radio :label="0">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="拒绝原因：" prop="reason" v-show="!testData.status">
                    <el-input type="textarea" v-model="testData.reason"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="testDialog = false">取 消</el-button>
                <el-button type="primary" @click="test">确定</el-button>
            </span>
        </el-dialog>
    
        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: ''
                },
           }
        },

WX20200421-231441@2x.png
WX20200421-232133@2x.png

主要是根据上面的代码说几个点
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()
                })

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