关于el-form的一些用法

1、表单的重置清除和触发

• resetFields方法：可移除校验结果并重置字段值（注：清除表单项name的校验及数值）
• clearValidate方法：只能移除校验结果，不能重置字段值（注：只清除表单项name的校验，不清除表单项name的数值）

//重置整个表单
this.$refs['ruleForm'].resetFields();
//清除整个表单
this.$refs['ruleForm'].clearValidate();
//清除特定属性
this.$refs['ruleForm'].clearValidate('name');

•  validateField()方法：触发表单中某一个校验

//触发单个表单验证
this.$refs.form.validateField('propName')

 //element官网 触发一个表单的验证
this.$refs[formName].validate((valid) => {
   if (valid) {
     alert('submit!');
   } else {
     console.log('error submit!!');
     return false;
   }
});
   

 

2、el-form-item的prop属性

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

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

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

3、多表单验证

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 显示前面的红星，就可以只对该属性校验了，将第二个表单再嵌套后，校验结果就正常了：

 4、验证对象

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

<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' },
     ],
   },
},

本文转载于：https://blog.csdn.net/wojiushiwo945you/article/details/108977668