element ui表单必填_element-ui表单验证使用-阿里云开发者社区

element-ui的表单验证主要分三部分:

validate

options

rules

最常用的是rules.

定义rule可以有三种形式:

函数： { name(rule, value, callback, source, options) {} }

对象： { name: { type: 'string', required: true } }

数组： { name: [{ type: 'string' }, { required: true }] }

函数的方式我自己也没有学会,暂时不说了.对象和数组的方式比较简单,也比常用.数组的方式,其实就是对象的方式的组合.

element-ui有定义好了很多的默认规则,并且还可以使用默认规则里的validator进行扩展自定义.

默认规则:

type: 数据的类型,默认的type见"默认type"一节

required： 是否必填,true or false

pattern：使用正则来验证

min: 数据的长度的最小值 (数据类型必须是string或array)

max: 数据的长度的最大值 (数据类型必须是string或array)

len: 数据的长度必须等于这个值 (数据类型必须是string或array)

enum: 数据的值必须等于这个枚举数组某个元素 { enum: [a, b, c] },注意需要type设置为enum

transform: 一个钩子函数，在开始验证之前可以对数据先处理后验证，如吧number转为string后再验证

message: 报错的提示信息,可以是字符串也可以是jsx标签Name is required

validator: 自定义验证函数以及报错信息 validator_name(rule, value, callback)

默认的type(对应默认规则的type部分取值):

string：String类型，type默认的取值

number：Number类型，如果后台返回的数据是字符串，可以用transform转为Number类型

boolean: Boolean类型

method: 必须是Function

regexp：必须是正则RegExp

integer：是Number类型的正整数

float: 是Number类型的浮点数

array: 是Array.isArray通过的数组

object: Array.isArray不通过的Object类型

enum: 先定义enum，值必须是enum枚举数组某个元素

date: Date对象的实例

url: String类型且符合链接格式

hex: Hex类型(十六进制)

email: String类型且符合邮箱格式

示例一,对象形式:

prop="title"

:rules="{

required: true, min:2, max:128, message: '亲,至少要输入两个字', trigger: 'blur'

}">

data() {

return {

addForm: {

title: ''

}

}

}

示例二,数组形式:

prop="title"

:rules="[

{required: true, message: '亲,必须要输入点东西', trigger: 'blur'},

{min:2, max:128,message: '亲,至少输入两个字;最多不超过128个字', trigger: 'blur'}

]">

示例三,自定义验证函数:

:prop="age"

:rules="{

validator: rule_age,trigger: 'blur'

}">

....

// 年龄校验方法

rule_age(rule,value,callback) {

// 0如果是合法值,需要单独判断,否则会被!value作为真

if (value === 0) {

return callback()

}

if (!value) {

return callback(new Error('请输入年龄'));

};

let n = Number(value);

if (n < 1) {

return callback(new Error('年龄不能小于1岁'));

} else if (n > 200) {

return callback(new Error('年龄不能大于200岁'));

};

callback();

},

...

// 提交,$refs.addForm 对应ref="addForm"

submit() {

this.$refs.addForm.validate((valid) => {

if (valid) {

console.log("验证通过")

} else {

console.log("验证不通过")

return false

}