Vuerules表单验证常用

首先在表单中绑定rules，并在item中定义属性prop：

1.  
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
2.  
   <el-form-item label="活动名称" prop="name">
3.  
   <el-input v-model="ruleForm.name"></el-input>
4.  
   </el-form-item>
5.  
   </el-form>

在data或computed中编写rules规则：

1.  
   rules {
2.  
   name: [ { type: 'string',required: true,message: "名称必填", trigger: 'blur'}, {max: 30,message: "名称长度不能超过30位" }]
3.  
   }

其中name为prop名

type：类型

required：是否必选项（此栏是否为空）

message：报错信息

trigger：触发方式（

blur ：失去焦点时进行验证
常用：对 input 输入框的验证

change ：当值发生变化时进行验证
常用：下拉框select，日期选择框date-picker，复选框checkbox，单选框radio）

也可以直接用pattern进行匹配验证:

name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]

vue的rules中自带的校验规则和常用正则表达式校验

1.  
   rules: {
2.  
       //验证非空和长度
3.  
       name: [{
4.  
           required: true,
5.  
           message: "站点名称不能为空",
6.  
           trigger: "blur"
7.  
           },{
8.  
           min: 3, 
9.  
           max: 5, 
10.  
            message: '长度在 3 到 5 个字符', 
11.  
            trigger: 'blur' 
12.  
        }],
13.  
        //验证数值
14.  
        age: [{ 
15.  
            type: 'number', 
16.  
            message: '年龄必须为数字值',
17.  
            trigger: "blur"
18.  
        }],
19.  
        //验证日期
20.  
        birthday:[{ 
21.  
            type: 'date', 
22.  
            required: true, 
23.  
            message: '请选择日期', 
24.  
            trigger: 'change' 
25.  
        }],
26.  
        //验证多选
27.  
        habit: [{ 
28.  
            type: 'array', 
29.  
            required: true, 
30.  
            message: '请至少选择一个爱好', 
31.  
            trigger: 'change' 
32.  
        }],
33.  
        //验证邮箱
34.  
        email: [{ 
35.  
            type: 'email', 
36.  
            message: '请输入正确的邮箱地址', 
37.  
            trigger: ['blur', 'change'] 
38.  
        }],
39.  
        // 验证手机号
40.  
        telephone: [{
41.  
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
42.  
            message: "请输入正确的手机号码",
43.  
            trigger: "blur"
44.  
        }],
45.  
        // 验证经度 整数部分为0-180小数部分为0到7位
46.  
        longitude: [{
47.  
            pattern: /^(\-|\ )?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
48.  
            message: "整数部分为0-180,小数部分为0到7位",
49.  
            trigger: "blur"
50.  
        }],
51.  
        // 验证维度 整数部分为0-90小数部分为0到7位
52.  
        latitude: [{
53.  
            pattern: /^(\-|\ )?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
54.  
            message: "整数部分为0-90,小数部分为0到7位",
55.  
            trigger: "blur"
56.  
        }]          
57.  
    }

前端Vue中常用rules校验规则:

1、是否合法IP地址:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

4.是否邮箱
pattern:/^([a-zA-Z0-9] [-_\.]?) @[a-zA-Z0-9] \.[a-z] $/,

5.整数填写
pattern:/^-?[1-9]\d*$/,

6.正整数填写
pattern:/^[1-9]\d*$/,

7.小写字母
pattern:/^[a-z] $/,

8.大写字母
pattern:/^[A-Z] $/,

9.大小写混合
pattern:/^[A-Za-z] $/,

10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,

11.数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9] $/,

12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z] $/,

13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d] $)(?![a-zA-Z] $)(?![^\da-zA-Z] $)([^\u4e00-\u9fa5\s]){6,20}$/,

14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z] $/,

这篇好文章是转载于：学新通技术网