el-form 中自定义校验某个表单字段

要在 el-form 中自定义校验某个表单字段的值,可以使用自定义校验函数。您可以通过在 el-form-item 上设置 prop 属性和 rules 属性来实现。

以下是一个示例:

<el-form ref="form" :model="formData" label-width="120px">
  <el-form-item label="名称" prop="name" :rules="[{ validator: validateName }]">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

在上述示例中,我们给 el-form-item 添加了 prop 属性,prop 属性的值需要与 formData 对象中的字段名称对应。同时,在 el-form-item 中通过 rules 属性指定了自定义的校验函数 validateName。

接下来,在 Vue 组件中定义 validateName 校验函数:

export default {
    
    
  data() {
    
    
    return {
    
    
      formData: {
    
    
        name: ''
      }
    };
  },
  methods: {
    
    
    validateName(rule, value, callback) {
    
    
      // 进行自定义校验逻辑
      if (value === 'admin') {
    
    
        callback(new Error('名称不能为 admin'));
      } else {
    
    
        callback();
      }
    },
    submitForm() {
    
    
      this.$refs.form.validate((valid) => {
    
    
        if (valid) {
    
    
          // 校验通过,进行表单提交操作
          console.log('表单校验通过');
        } else {
    
    
          // 校验不通过,进行错误处理
          console.log('表单校验未通过');
        }
      });
    }
  }
};

在上述代码中,通过 validateName 函数对输入的名称进行自定义校验。如果名称为 ‘admin’,则调用 callback 函数传递错误信息,否则调用 callback 函数不传递任何参数。同时在这个函数里面也可以把data中的数据作为参考进行判断。

最后,我们在 submitForm 方法中调用 el-form 的 validate 方法来触发表单校验。在回调函数中,根据校验结果进行相应的处理。

通过以上的步骤,您就可以在 el-form 中自定义校验某个表单字段的值了。

猜你喜欢

转载自blog.csdn.net/qq_47945175/article/details/132469902