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表单的该绑定绑定

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
</el-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'),
      },

演示