Element UI表单验证规则

1.必填字段：required

 
rules: {
  fieldName: [
    { required: true, message: '该字段不能为空', trigger: 'blur' }
  ]
}

2.最小长度：min

rules: {
  fieldName: [
    { min: 6, message: '最少输入6个字符', trigger: 'blur' }
  ]
}

3.最大长度：max

rules: {
  fieldName: [
    { max: 10, message: '最多输入10个字符', trigger: 'blur' }
  ]
}

4.数值范围：min 和 max

rules: {
  fieldName: [
    { type: 'number', min: 0, max: 100, message: '请输入0到100之间的数字', trigger: 'blur' }
  ]
}

5.自定义正则表达式：pattern

rules: {
  fieldName: [
    { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' }
  ]
}

6.邮箱格式验证：email

rules: {
  email: [
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
}

7.手机格式验证，利用的是正则表达式

  phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[0-9]{10}$/, message: '请输入有效的手机号码', trigger: 'blur' }
      ]

8.表单验证规则中的 trigger 属性用于指定触发验证的时机。trigger: 'blur' 意味着当输入框失去焦点时触发验证规则。

trigger 的含义

• blur: 当输入框失去焦点时触发验证。
• change: 当输入框的内容发生变化时触发验证。
• submit: 当表单提交时触发验证。
• manual: 需要手动触发验证，通常通过调用 this.$refs['formName'].validate 来实现。