当前位置：首页 > 前端教程

elementui validetor

2026-03-05 18:48:31前端教程

使用 ElementUI 表单验证

ElementUI 提供了强大的表单验证功能，主要通过 el-form 组件和 rules 属性实现。以下是实现表单验证的详细方法：

安装 ElementUI 确保项目中已安装 ElementUI。若未安装，可以通过以下命令安装：

npm install element-ui -S

引入 ElementUI 在 main.js 或需要的组件中引入 ElementUI 和样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基本表单验证

elementui validetor

定义表单和验证规则：


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

export default { data() { return { form: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('验证通过'); } else { alert('验证失败'); return false; } }); } } }; ```

自定义验证规则 可以通过 validator 函数实现自定义验证：

rules: {
  username: [
    { validator: (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'));
      } else if (value.length < 3) {
        callback(new Error('用户名长度不能小于3'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
}

动态验证规则 可以根据条件动态修改验证规则：

elementui validetor

methods: {
  changeRule() {
    this.rules.username = [
      { required: true, message: '动态规则生效', trigger: 'blur' }
    ];
  }
}

验证多个字段 对于需要验证多个字段的情况（如密码确认），可以在 rules 中定义：

rules: {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
}

重置表单验证 调用 resetFields 方法可以重置表单和验证状态：

methods: {
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
}

异步验证 通过返回 Promise 或调用 callback 实现异步验证：

rules: {
  username: [
    { validator: (rule, value, callback) => {
      setTimeout(() => {
        if (value === 'admin') {
          callback(new Error('用户名不能为 admin'));
        } else {
          callback();
        }
      }, 1000);
    }, trigger: 'blur' }
  ]
}

以上方法涵盖了 ElementUI 表单验证的常见场景，包括基本验证、自定义规则、动态规则和异步验证。根据实际需求选择合适的方式即可。