element-ui的form表单校验

最新推荐文章于 2025-05-29 15:46:55 发布

fishssss

最新推荐文章于 2025-05-29 15:46:55 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/minnyYu/article/details/128475265

本文详细介绍了在Vue.js中进行表单验证的三个基本步骤：首先，定义验证规则，包括必填项、长度限制及自定义校验；其次，配置模板，将规则应用到表单并设置model属性；最后，通过$refs调用validate方法进行手动校验，确保表单数据有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

form表单校验基本三步：

1、定义验证规则

// 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          // 自定义校验规则
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }

在data中定义表单校验规则，一个表单项可定义多条规则，表单项规则用数组，规则为对象，required为必须填写，message为校验提示信息，trigger为校验时机，可选blur和change，分别为失去焦点和数据变化；min/max为最小与最大字符个数，validator为自定义校验规则，参数可以直接写规则，也可以写函数。

2、配置模板，应用规则
      给表单设置 rules 属性传入验证规则
      给表单设置model属性传入表单数据
      给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

<el-form ref="deptForm" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
</el-form>

3、手动兜底验证

通过给form表单设置ref，使用$refs获取form元素，调用validate方法进行校验通过，resetFields方法重置表单

// 确定
    hSubmit() {
      // 表单兜底校验
      this.$refs.deptForm.validate(valid => {
        if (valid) { // true为校验通过
          this.isEdit ? this.doEdit() : this.doAdd()
        }
      })
    }