一、单词意思
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： 可以是任何类型。
