【vue+el-form+validate】表单中一个填写区域同时校验两个字段

一个表单填写区域校验两个字段:
在这里插入图片描述
1、校验prop必写: prop="abscissa"

<el-form-item label="横纵坐标值" prop="abscissa">
  <el-input
    size="small"
    id="nodexLeft"
    style="width: 50%"
    v-model="form.abscissa"
    placeholder="请填写数字"
    @input="form.abscissa = $util.onkeyNumber(form.abscissa)"
  >
    <template slot="prepend">x</template>
  </el-input>
  <el-input
    size="small"
    id="nodeyRight"
    style="width: 50%"
    v-model="form.ordinate"
    placeholder="请填写数字"
    @input="form.ordinate = $util.onkeyNumber(form.ordinate)"
  >
    <template slot="prepend">y</template>
  </el-input>
</el-form-item>

2、data下添加自定义校验规则 + 普通定义校验rules

data() {
    // 自定义横纵坐标验证规则
	const checknodexy = (rule, value, callback) => {
		if (!(this.form.ordinate && this.form.abscissa)) {
			return callback(new Error('请填入横纵坐标'));
		} else {
			callback();
		}
	};
	return {
		rules: {
	        abscissa: [
	          // checknodexy用的是上面定义的
	          { validator: checknodexy, required: true, trigger: 'blur' }
	        ]
	    },
	}
}
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vueel-form validate功能可以方便地用于表单校验。在表单,有时需要同时校验两个字段,比如一个填写区域需要同时校验一个选择框和一个输入框的内容。那么如何实现呢? 首先,在el-form我们可以利用rules属性设置表单校验规则。我们可以为每个字段设置不同的校验规则,然后在提交表单时触发校验。对于同时校验多个字段的情况,我们需要使用自定义校验方法。 具体实现如下: 1. 在el-form,分别给选择框和输入框设置ref属性(比如分别为"selectRef"和"inputRef")。 2. 在el-form添加自定义校验方法handler,该方法接收两个参数rule和value,其rule表示当前校验的规则,value表示填写的值。在该方法,我们可以获取选择项和输入框的值,同时进行校验。如果校验成功,返回true,否则返回错误信息。 3. 在选择框添加自定义校验规则(比如required),并设置validator属性为我们定义的handler方法。 4. 在输入框添加相应的校验规则和验证器,设置validator属性为我们定义的handler方法。 5. 在el-form的submit方法,调用el-formvalidate方法,触发表单校验。如果校验失败,弹出错误提示,否则提交表单。 这样,我们就可以轻松地实现同时校验多个字段表单校验了。当然,根据具体的业务需求,我们还可以为不同的字段设置不同的校验规则,并且在校验时进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值