element-ui的form表单校验

本文详细介绍了在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()
        }
      })
    }

### 实现 Element-UI 表单校验提示信息始终显示 为了使 Element-UI表单校验提示信息始终保持可见,可以通过自定义样式和逻辑来实现这一功能。以下是具体方法: #### 自定义样式调整 通过覆盖默认的 `element-ui` 样式,可以确保校验提示信息不会因为滚动或其他事件而隐藏。例如,可以在全局 CSS 或组件局部样式中添加如下代码[^1]: ```css .design-form-validateicon { .el-form-item--small.el-form-item { margin-bottom: 0; } .el-form-item .error-tip { position: absolute; right: 6px; top: 0; transition: 0.2s; } .el-form-item.is-error { .error-tip { color: #f74439; } .el-form-item__content .el-select + .error-tip { right: 26px; } } } ``` 上述样式会强制让错误提示图标保持固定位置并显眼。 #### 配置校验规则 对于 `element-ui` 版本 1.x 中的表单校验规则,需设置 `required` 属性为 `true` 并指定触发条件为 `'change|blur'`[^2]。然而,默认情况下这些消息会在失去焦点或输入变化时才显示。要使其一直显示,可通过以下方式解决: ##### 方法一:手动调用验证函数 在初始化阶段或者特定时刻主动调用 `validateField` 函数以触发表单项的校验状态。例如: ```javascript this.$refs.form.validate((valid) => {}); // 对于单独字段也可以这样操作: this.$refs.form.validateField('fieldName'); ``` 这一步骤能够立即激活对应字段的校验机制,并将其结果显示出来。 ##### 方法二:修改源码或扩展插件 如果希望更彻底地改变行为模式,则可能需要深入到框架内部去定制化开发。比如重写部分核心组件的行为逻辑使得它们不再依赖外部交互动作即可完成即时反馈处理过程;不过这种方式较为复杂且容易引发兼容性问题因此不推荐作为首选方案除非确实必要才行得通的话再考虑实施吧! 综上所述,最简便有效的方法还是采用 **方法一** 结合适当CSS美化达到预期目标效果最佳实践建议如此这般去做比较好一点哦亲~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值