参数
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 : 可以是任何类型
示例
required:
必填字段,即非空验证。如上面实例中的的非空验证,以及邮箱前边的必填符号*,就是这个参数的功劳。
pattern:
正则表达式,如果需要验证手机号码之类,可以直接编写正则表达式配置到校验规则中,那么就不需要自己去校验了,由校验器自动校验。
pattern: [{ type: "string", required: true, pattern: /^[a-z]+$/ }]
min/max:
判断数据大小范围,通常对数字大小范围做校验。对于字符串和数组类型,将根据长度进行比较。
minmax: [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },]
len:
长度验证,如11位手机号码。
len: [{ type: "array", required: true, len: 3 }],
enum:
枚举值验证,示例代码如下:
enum: [{ type: "enum", enum: ['admin', 'user', 'guest'] }]
whitespace:
验证是否只有空格(如果没有该配置,则全空格的输入值也是有效的)。
whitespace: [{type: "string",message: '只存在空格',whitespace: true,trigger: ['change', 'blur']}]
transform:
有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 transform ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。
只有输入1、2、3的时候才能校验通过。
貌似这个只能辅助校验,并不能改变组件绑定变量本身的值。
transform: [{type: 'enum',enum: [2, 4, 6],message: `结果不存在`,trigger: ['change', 'blur'],transform (value) {return Number(value * 2)}}]
fields:
深层规则,可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则,如地址对象的省市区的规则验证:
fields: [{ // object类型type: "object",required: true,fields: {street: { type: "string", required: true },city: { type: "string", required: true },zip: { type: "string", required: true, len: 8, message: "invalid zip" }}},{ // array类型type: "array", required: true, len: 3,fields: {0: { type: "string", required: true },1: { type: "string", required: true },2: { type: "string", required: true }}}]
messages:
未通过校验的提示信息:
message: [{ type: "string", required: true, message: "Name is required" },// 支持html:{ type: "string", required: true, message: "<b>Name is required</b>" },// 支持vue-i18n:{ type: "string", required: true, message: () => this.$t('name is required') }]
validator:
可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点,但是能实现比较复杂的业务逻辑判断。
简单的用法:
validator: [{validator (rule, value, callback) {return value === 'test';},message: 'Value is not equal to "test".',}]
复杂用法:
······data () {const checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};return {ruleForm: {age: 11},rules: {age: [{type: 'number',required: true,validator: checkAge,trigger: ['blur', 'change']}]}};}······
