vue表单rules校验

你的名字 2023-09-30 09:59 101阅读 0赞

#### 文章目录 ####

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

## 一、表单校验 ##

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

### 1. 表单项校验 ###

1.  form标签处申明，此标签要使用rules规则，如下图，
    
    1.  :rules=“formRules”：formRules是后续我们自己编写的规则的名称；
    2.  ref=“rulesForm”：获取整体表单的数据保存在rulesForm，用于校验整体表单做准备；
    3.  :model="rulesForm：这个是JS处定义的变量，将Form标签控件与rulesForm的json变量绑定  
        ![在这里插入图片描述][7fa002889fd34efe90c30458ffd0f576.png]
2.  申明表单中单项的属性prop，prop与v-model中绑定的是对应的。prop是必填的，我们定义的校验规则通过prop属性来绑定。  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]
3.  编写规则，其中userName的规则，就对应前面属性prop="userName"那个表项，对userName表项的校验规则为：必须输入；若为输入显示“请输入用户名称”；当失去焦点时验证执行（这句啥意思我不知道）  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]
4.  我们还可以自己定义一个检验方法，然后引入使用，这里与所推荐博客的写法不同
    
    在规则处写：引用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();
                            }
                        }
                    };
    
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 2. 表单整体校验 ###

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

## 二、规则模板 ##

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

## 三、踩坑合集 ##

### 1. 单项规则校验没问题，表单整体校验不通过？ ###

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

[vue_rules]: https://blog.csdn.net/qq_41402200/article/details/86016313
[7fa002889fd34efe90c30458ffd0f576.png]: https://img-blog.csdnimg.cn/7fa002889fd34efe90c30458ffd0f576.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5048fc428e044eae9b19778830472869.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/43207096fd3441d9a92824e18be6cd90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/0c6eb3a676ad43218b5ad912fe00e431.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[vue_rules 1]: https://blog.csdn.net/asdfghjkl521947/article/details/108665312
[Vue_rules]: https://www.cnblogs.com/lieone/p/11856330.html
[vue_element _-]: https://blog.csdn.net/m0_46183615/article/details/114443552