vue elementui 整数校验 vue中rules数字校验

文章目录

• 一、表单校验

• 1. 表单项校验
• 2. 表单整体校验

• 二、规则模板
• 三、踩坑合集

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

一、表单校验

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

1. 表单项校验

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

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

2. 申明表单中单项的属性prop，prop与v-model中绑定的是对应的。prop是必填的，我们定义的校验规则通过prop属性来绑定。
3. 编写规则，其中userName的规则，就对应前面属性prop="userName"那个表项，对userName表项的校验规则为：必须输入；若为输入显示“请输入用户名称”；当失去焦点时验证执行（这句啥意思我不知道）
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();
                    }
                }
            };