夜场网站建设,家庭安全卫士论坛WordPress,网站新增一个域名备案,门户网站建设费用前言 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在#xff0c;自定义表单验证。 的表单验证大家都知道form绑定rules#xff0c;prop绑定值与form.值一样#xff0c;必填#xff0c;失去焦点触发 提示信息。 今天我们讲一讲自定义验证规则具体使用场景和它…前言 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在自定义表单验证。 的表单验证大家都知道form绑定rulesprop绑定值与form.值一样必填失去焦点触发 提示信息。 今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用 当我们明白了 validator3个参数意思我们就可以随机组合我们自己的验证规则了
自定义验证规则
prop绑定值: [{validator: (rule, value, callback) {console.log(验证规则信息,rule);console.log(输入框的值,rule);// callback()为空通过验证// callback(new Error(未通过验证抛出异常))console.log(是否通过验证规则,callback);},// 失去焦点触发trigger: blur,},],
使用场景-正则验证是否是手机号
test()方法用于检测字符串中指定的值匹配成功返回true匹配失败返回false
prop绑定值: [{ validator: (rule, value, callback) {// 手机号正则表达式const reg /^[1][3,4,5,7,8][0-9]{9}$/if (value || value undefined || value null) {callback()} else {// 正则失败false取反true抛出异常if (!reg.test(value) value ! ) {// 抛出异常验证规则有错callback(new Error(请输入正确的电话号码))} else {callback()}}// 输入框值变化一次执行一次}, trigger: change },],
使用场景-判断合同编号是否重复
prop绑定值: [{ required: true, message: 请输入合同编号, trigger: blur },{validator: async (rule, value, callback) {// 发请求const res await adrepetition(value);console.log(合同编号, res// 判断状态码if (res.code 200) {callback();} else {callback(new Error(合同编号重复请重新输入));}},trigger: blur,},],
使用场景-多选判断是否选中
checkListmain是data里面数据是多选v-model绑定的值是一个数组
prop绑定值: [{ required: true, message: 请输入合同编号, trigger: blur },{validator: async (rule, value, callback) {// 发请求const res await adrepetition(value);console.log(合同编号, res// 判断状态码if (res.code 200) {callback();} else {callback(new Error(合同编号重复请重新输入));}},trigger: blur,},], 总结
经过这一趟流程下来相信你也对 Vue-自定义表单验证rulevaluecallback详细使用 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
