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 中自定义校验某个表单字段的值了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值