element

2023-04-08 23:37| 来源: 网络整理| 查看: 265

一、单词意思

name:为prop名

type：类型

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

message：报错信息

trigger：触发方式（

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

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

二、验证问题

pattern匹配验证:

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

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

rules: { //验证非空和长度 name: [{ required: true, message: "站点名称不能为空", trigger: "blur" },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }], //验证数值 age: [{ type: 'number', message: '年龄必须为数字值', trigger: "blur" }], //验证日期 birthday:[{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }], //验证多选 habit: [{ type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }], //验证邮箱 email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], // 验证手机号 telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }], // 验证经度整数部分为0-180小数部分为0到7位 longitude: [{ 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)$/, message: "整数部分为0-180,小数部分为0到7位", trigger: "blur" }], // 验证维度整数部分为0-90小数部分为0到7位 latitude: [{ pattern: /^(-|+)?([0-8]?\d{1}.\d{0,7}|90.0{0,6}|[0-8]?\d{1}|90)$/, message: "整数部分为0-90,小数部分为0到7位", 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]+$/, 复制代码三、参数 type 标志要使用的validator的数据类型 required 必填 message 提示内容 trigger 触发条件（change||blur） min 最小值 max 最大值 len 精准长度 (优先级高于min,max) enum 枚举中存在该值 (type必须为enum类型) whitespace 不能包含空白符 pattern 正则 (必须加 required: true) 复制代码四、类型 string：必须是类型。stringThis is the default type. number：必须是类型。number boolean：必须是类型。boolean method：必须是类型。function regexp：必须是在创建新时不生成异常的实例或字符串。RegExpRegExp integer：必须是类型和整数。number float：必须是类型和浮点编号。number array：必须是由确定的数组。Array.isArray object：必须是类型而不是。objectArray.isArray enum：值必须存在于中。enum date：值必须有效，由Date url：必须是类型。url hex：必须是类型。hex email：必须是类型。email any：可以是任何类型。复制代码

【本文地址】

公司简介

联系我们