首页 > 其他 > 详细

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

时间:2020-10-14 22:52:24      阅读:35      评论:0      收藏:0      [点我收藏+]

校验规则

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        //校验失败
    //校验成功
   
} )

 

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

原文:https://www.cnblogs.com/xhxdd/p/13817091.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!