前端|Element-UI 表单校验 element-UI|前端框架小领地

{ required: true, message: '必填', trigger: 'change|blur' }

指示type要使用的验证器。认可的类型值为：

string: 必须是类型string。This is the default type.
number: 必须是类型number。
boolean: 必须是类型boolean。
method: 必须是类型function。
regexp: 必须是RegExp创建新的时不产生异常的实例或字符串RegExp。
integer: 必须是类型number和整数。
float: 必须是类型number和浮点数。
array: 必须是由确定的数组Array.isArray。
object: 必须是 typeobject而不是Array.isArray。
enum: 值必须存在于enum.
date：值必须是有效的，由Date
url: 必须是类型url。
hex: 必须是类型hex。
email: 必须是类型email。
any: 可以是任何类型。

required 属性指示该字段必须存在于正在验证的源对象上。

element-ui版本在1.X时,校验

{ required: true, message: '必填', trigger: 'change|blur' }

element-ui版本在2.X时,校验

{ required: true, message: '必填', trigger: 'change' }

鉴于一个项目会多处用到校验,则可建一个.js文件来收纳该校验规则;
譬如建立一个valid.js文件,此处以版本2.X为栗子
举个栗子:
valid.js如下:

export default { required: (message) => { if (!message) { message = '* 必填'; } return { required: true, message: message, trigger: 'change' }; }, required_trigger: (message, trigger) => { return { required: true, message: message, trigger: trigger }; }, required_type: (message, type) => { return { type: type, required: true, message: message, trigger: 'change' }; }, mobile: () => { return { message: '手机号格式错误', trigger: 'change', pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ } }, IdCard: () => { return { message: '身份证格式错误', trigger: 'change', pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/ } }, }

1.使用的页面上引入该文件

import valid from "@/common/utils/valid";

2.form表单的该绑定绑定

rules: { Name: valid.required('请输入姓名'), Mobile: [valid.required('请输入手机号'),valid.mobile()], IDCard: [valid.required('请输入身份证'),valid.IdCard()], Sex: valid.required_type('请选择性别'), DiagnosedAge: valid.required_type('请输入确诊年龄', 'number'), Birthday: valid.required_type('请选择出生日期', 'date'), ISTransfer: valid.required_type('请选择', 'boolean'), HospitalID: valid.required_type('请选择当前治疗医院', 'object'), MDTType: valid.required_type('请选择', 'array'), },

演示