ElementUI表单验证指南

ElementUI 是一套基于 Vue.js 的组件库，提供了丰富的表单组件和验证功能。其表单验证通过 el-form 组件结合 rules 规则实现，支持同步和异步验证。

基本表单验证实现

在 ElementUI 中，表单验证需要配置 el-form 的 rules 属性，并为每个 el-form-item 指定 prop 属性以关联验证规则。

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <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 v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="form.mobile" ></el-input>
    </el-form-item>
    <el-form-item label="身份证" prop="identityCard">
      <el-input v-model="form.identityCard" ></el-input>
    </el-form-item>
    <el-form-item label="车牌号" prop="carId">
      <el-input v-model="form.carId" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5]+$/,  message: '用户名只能为中文'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, 
            message: '密码必须包含字母和数字，且至少8位', trigger: 'blur' },
          { pattern: /^(\w){6,20}$/, message: '只能输入6-20个字母、数字、下划线'},
          {

            pattern: /[a-z]\w{3,7}/,
            message: '必须是4-8位的数字英文下画线,以字母开头'
          },
        ],
        mobile:[{ required: true, message: '请输入手机号码', trigger: 'blur' },
                {validator:function(rule,value,callback){
                    if(/^1[34578]\d{9}$/.test(value) == false){
                        callback(new Error("请输入正确的手机号"));
                    }else{
                        callback();
                    }
                }, trigger: 'blur'}
        ],
        //   pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
        identityCard:[{ required: true, message: '请输入身份证ID', trigger: 'blur'},
                      { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' 
        }
        ],
        carId:[
            {required: true, message: '请输入车牌号', trigger: 'blur'}, 
            {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/, message: '常规格式：晋B12345'},
        ],
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          alert('表单验证通过')
        } else {
          return false
        }
      })
    }
  }
}
</script>

自定义验证规则

可以通过自定义验证函数实现更复杂的验证逻辑。验证函数需要返回 callback 或 Promise。

data() {
  const validateAge = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('年龄不能为空'))
    }
    setTimeout(() => {
      if (!Number.isInteger(+value)) {
        callback(new Error('请输入数字值'))
      } else {
        if (value < 18) {
          callback(new Error('必须年满18岁'))
        } else {
          callback()
        }
      }
    }, 1000)
  }
  return {
    rules: {
      age: [
        { validator: validateAge, trigger: 'blur' }
      ]
    }
  }
}

表单重置和清除验证

ElementUI 提供了表单重置和清除验证状态的方法。

methods: {
  resetForm() {
    this.$refs.formRef.resetFields()
  },
  clearValidate() {
    this.$refs.formRef.clearValidate()
  }
}

动态表单验证

对于动态增减的表单项，需要特别注意验证规则的更新。ElementUI 支持动态添加和移除验证规则。

methods: {
  addItem() {
    this.form.items.push({ value: '' })
    this.rules.items.push({ value: [
      { required: true, message: '请输入值', trigger: 'blur' }
    ]})
  }
}

异步验证

某些场景需要异步验证，如检查用户名是否已存在。可以通过返回 Promise 实现异步验证。

data() {
  const checkUsername = (rule, value, callback) => {
    return new Promise((resolve, reject) => {
      if (!value) {
        return reject(new Error('请输入用户名'))
      }
      setTimeout(() => {
        if (value === 'admin') {
          reject(new Error('用户名已存在'))
        } else {
          resolve()
        }
      }, 1000)
    })
  }
  return {
    rules: {
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ]
    }
  }
}

表单验证事件

ElementUI 表单提供多种验证事件，可以监听表单和表单项的验证状态变化。

<el-form 
  @validate="onValidate"
  @submit.native.prevent>
  <el-form-item 
    @change="onFieldChange">
  </el-form-item>
</el-form>

验证规则参数详解

ElementUI 验证规则支持多种配置参数：

• required: 是否为必填项
• message: 验证失败时的提示信息
• trigger: 触发验证的事件，如 blur 或 change
• validator: 自定义验证函数
• pattern: 正则表达式验证
• min/max: 最小/最大长度或值

rules: {
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

限制表单输入类型

正整数

<el-input v-model="params.insAmt" maxlength="10" oninput="value=value.replace(/\D/g, '')">
          <template slot="append">万元</template>
        </el-input>

大于零的数

 <el-input v-model="params.intendedPrice" maxlength="10"
          oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')"></el-input>