el-form model、prop属性和表单校验

时间:2022-09-28 别来打扰我人气:4

Vue 的 el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装，让前端校验更方便。

具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。

el-form 的 model 属性

el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数据，el-form 内部的 el-input 组件依然可以绑定其他数据。

需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。

<el-form :model="groupData" :rules="rules" ref="groupForm">
	<el-form-item label="分组名称：" prop="name">
	  <el-input v-model="groupData.name"/>
	</el-form-item>
</el-form>

这段代码中 el-form 的 model 是 groupData，那么 el-form-item 中所有需要校验的表单的的 model 也必须是 groupData.xxx ，即 groupData 对象的直接属性。

el-from-item 的 prop 属性

el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。

<el-form-item label="策略名称" prop="strategyName">
            <el-input v-model="data.strategyName" />
</el-form-item>

要校验的表单 model 是 data.strategyName，那么 prop 的值也必须是 strategyName，否则无法正确完成校验，出现明明已经已经输入了表单值，但是还是出现校验失败的提示信息。

多表单校验

el-form-item 内部如果包含多个表单，默认校验失败时会将所有表单高亮，例如：

虽然只有第二个表单没有输入，但是校验失败时会同时高亮两个表单。怎么只对第二个表单高亮呢？

解决办法是用嵌套：
外层 el-form-item 是正常的信息，内层对第二个表单再次嵌套 el-form-item 指定校验属性：

<el-form-item label="任务执行时间：" required>
    <el-select v-model="data.executeCycle">
      <el-option label="每小时" value="hour">每小时</el-option>
      <el-option label="每日" value="day">每日</el-option>
      <el-option label="每周" value="week">每周</el-option>
      <el-option label="每月" value="month">每月</el-option>
    </el-select>
    <el-form-item prop="executeTime">
      <el-date-picker v-model="data.executeTime"
		      type="datetime"
		      value-format="yyyy-MM-dd HH:mm:ss"
		      placeholder="选择日期时间"
		      default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
</el-form-item>

将日期输入框包裹在新的 el-form-item 中，外层的 el-form-item 添加 requred 显示前面的红星，就可以只对该属性校验了，将第二个表单再嵌套后，校验结果就正常了：

复杂属性

<el-form-item label="执行周期 " prop="config.gapTime">
            <el-input    type="number" :min="1" v-model="data.config.gapTime">
            </el-input>
  <el-form-item>

此时，该属性对应的 rules 定义也必须是对象：

rules: {
        config: {
          gapTime: [
            { required: true, message: '请输入执行周期', trigger: 'blur' },
          ],
        },
      },

否则，就会出现明明已经输入了值，但是还是提示校验错误信息。

注意

表单校验的时候，犯了几个低级错误，记录如下：

el-form 下的 el-input 使用的数据不是 el-form 的 model 数据，导致校验失败；
el-form 的 :rules 属性敲错了，忘记了冒号，导致传递的是个字符串；
el-form-item 的 prop 和 el-input 表单的属性不一致导致校验失败。

到此这篇关于el-form的model、prop属性和表单校验等使用的文章就介绍到这了,更多相关el-form model、prop属性和表单校验内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

加载全部内容