首页 IT程序员内容详情

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

2021-05-13 2848 小付

表单内容里面定义属性:


<From ref="rulesForm"  :model="rulesForm"  :label-width="100" :rules="rules">

   <FormItem label="名称" prop="name">

        <Input v-model="rulesForm.name" placeholder="名称"/>

   </FormItem>

</Form>

1

2

3

4

5

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


rules {

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

      }

1

2

3

rules:与上文 ‘表单内容’ 中 表单的 :rules 属性值相同

prop:与规则中的name属性相同

验证内容:必填,blur是失去焦点验证,max是最大长度验证(min最小长度)


直接用pattern进行匹配验证:


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

1

前端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博主「蓝木蓝木」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/asdfghjkl521947/article/details/108665312


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论