这篇文章给大家分享的是有关vue elementUI如何实现自定义正则规则验证的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
项目场景:
常见的表单填写中都会遇到,比如新增信息,修改信息等,如下图
相信大家对上面的验证都非常熟悉了,不多哔哔 本篇文章主要 想写 验证规则自定义 相关的内容
验证是否是合法手机号(举例)
实现下图所示:
实现步骤:
step 1
准备好 reg表达式 , 百度即可 电话号码—— /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
step 2
model 和 ref 最好一致
prop验证的phone_number 和 v-model 绑定的phone_number 的字段名也要一致 注意细节
<el-form :model="ruleForm" ref="ruleForm" :rules="rules"> <el-form-item label="xxx电话号码" prop="phone_number"> <el-input v-model="ruleForm.phone_number"></el-input> </el-form-item> </el-form> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
step 3
data() {饿了么文档上写的在这里定义一个 checkPhon_unm 回调// 电话号码 验证 var checkPhon_unm = (rule, value, callback) => { if (value) { if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)) { callback(new Error("请输入正确的电话号码!")); } else { callback(); } } else { callback(); } }; return { rules: { phone_number: [{ validator: checkPhon_unm, trigger: "blur" }], }, }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); },
感谢各位的阅读!关于“vue elementUI如何实现自定义正则规则验证”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!