在vue中使用rules的定义和校验规则

表单内容里面定义属性:

<From ref="rulesForm"  :model="rulesForm"  :label-width="100" :rules="rules">
   <FormItem label="名称" prop="name">
        <Input v-model="rulesForm.name" placeholder="名称"/>
   </FormItem>
</Form>

在data()里面写具体的规则:

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

rules：与上文 ‘表单内容’ 中 表单的 :rules 属性值相同 prop：与规则中的name属性相同 验证内容：必填，blur是失去焦点验证，max是最大长度验证（min最小长度）

直接用pattern进行匹配验证:

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

前端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]+$/,

本文为CSDN博主「蓝木蓝木」的原创文章 原文链接：blog.csdn.net/asdfghjkl52…