目录
1、HTML部分
- 1、HTML部分
- 2、JavaScript部分
- 3、实现概况
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态校验 el: "#app", data() { return { ruleForm: { matchingValue: '24.00', value: null }, rules: { matchingValue: [{ required: false, message: '请输入', trigger: 'blur' },], value: [ { required: true, message: '请输入', trigger: 'blur' }, { required: true, validator: (rule, value, callback) => { console.log(rule, value); if (Number(value) < Number(this.ruleForm.matchingValue)) return callback(new Error('实收金额大于等于应缴金额')); callback(); }, trigger: ['change', 'blue'], }, ], } } }, });
3、实现概况
模块分为两部分，第一部分是需要支付的金额展示，第二部分是input框。根据input框输入的值实时与需要支付金额进行匹配，并提示用户输入的金额是否大于等于支付金额。在element-ui表单的在input框上绑定prop属性实现自定义校验规则，这个规则在rules里面声明，使用element-ui自定义规则的validator声明函数，此函数返回rule、value和callback，使用返回的value与支付金额的value进行比较，如果输入金额小于支付金额就提示用户输入有误，否则使用callback继续调用函数。
