文章目录 一、表单校验1. 表单项校验2. 表单整体校验 二、规则模板三、踩坑合集1. 单项规则校验没问题，表单整体校验不通过？

一、表单校验

此部分详情可参考此博客《在vue中使用rules对表单字段进行验证》，这里只记录一下个人理解。

1. 表单项校验

form标签处申明，此标签要使用rules规则，如下图，

:rules=“formRules”：formRules是后续我们自己编写的规则的名称；ref=“rulesForm”：获取整体表单的数据保存在rulesForm，用于校验整体表单做准备；:model="rulesForm：这个是JS处定义的变量，将Form标签控件与rulesForm的json变量绑定

申明表单中单项的属性prop，prop与v-model中绑定的是对应的。prop是必填的，我们定义的校验规则通过prop属性来绑定。

编写规则，其中userName的规则，就对应前面属性prop="userName"那个表项，对userName表项的校验规则为：必须输入；若为输入显示“请输入用户名称”；当失去焦点时验证执行（这句啥意思我不知道）

我们还可以自己定义一个检验方法，然后引入使用，这里与所推荐博客的写法不同

在规则处写：引用validatePwd校验方法

userPwd:[ { required: true, validator: validatePwd, // 使用单独定义的方法来校验输入的密码 trigger: 'blur' } ],

然后编写validatePwd校验方法：（校验方法写在data:function()下即可）

var validatePwd = (rule,value,callback) => { // 定义验证规则 var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/; // 进行校验判断与提示 if (value==''||value==undefined||value==null){ callback(new Error("请填写密码！")); } else { if (!reg.test(value)){ callback(new Error('6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种')); } else { callback(); } } };

2. 表单整体校验

参考我推荐的博客《在vue中使用rules对表单字段进行验证》即可。

二、规则模板

这里给出我在学习rule时碰到的比较好的rules模板： 《在vue中使用rules的定义和校验规则》 《前端Vue中常用rules校验规则》

三、踩坑合集 1. 单项规则校验没问题，表单整体校验不通过？

参考博客《关于vue+element 表单验证未执行的问题-表单验证失败》

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。