ElementUi表单验证规则

1.在<el-form ref="form" :model="form" :rules="rules">绑定rules规则

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

2.在data中定义规则

rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }

3.点击提交的时候自动验证规则

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过，执行提交操作
      } else {
        // 表单验证不通过，提示错误信息
      }
    });
  }
}

4.自定义规则：就是自定义一个函数，然后把函数放在rules中的字段名的{validator：this.xxx,trigger:'blur'}

validateAge 方法是一个验证函数，它接收三个参数：rule 是当前验证规则的配置对象，value 是当前表单项的值，callback 是用于返回验证结果的回调函数。

methods: {
  validateAge(rule, value, callback) {
    if (!value) {
      callback(new Error('请输入年龄'));
    } else {
      // 自定义规则：年龄必须在18岁以上
      if (value < 18) {
        callback(new Error('年龄必须在18岁以上'));
      } else {
        callback();
      }
    }
  },

 rules: {
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { validator: this.validateAge, trigger: 'blur' }
      ]
    }

5.常见的规则：

(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' }
      ]