Elenent ui中的表单校验规则、自定义校验规则、预验证功能

校验规则

html

<el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
    <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username" />
    </el-form-item>
</el-form>

js

addFormRules: {
    username: [{    
        required: true,          //设置此项为 必填
        message: '请输入活动名称',          //提示信息
        trigger: 'blur'      //失去焦点时触发校验
    }]
}

自定义校验规则

js

data{
    //验证邮箱的正则
    var checkEmail = (rule, value, cb) => {
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (regEmail.test(value)) {
            return cb()
        }
        cb(new Error('请输入合法的邮箱'))
    }
    return{
        addFormRules: {
            username:[{
                validator: checkEmail,　　//自定义校验规则
                trigger: 'blur'　　　　//失去焦点时触发
            }]
        }
    }
}

关闭时清除校验规则

关闭方法(表单在对话框(dialog)中，监听对话框的关闭)中写：

this.$refs.表单ref.resetFields( )

确认时预验证

确认方法中写：

this.$refs.表单ref.validate( valid =>{ 
    console.log( valid )
    if ( !valid ) return        //校验失败
    //校验成功
   
} )