el-form校验必填无法取值

el-form校验取不到值,watch深度监听失效


原因:表单值放在data的from属性中,在每次弹出修改框时,form=response.data,此时from中没有校验的字段,所以导致校验一直取不到值一直报必填错误,监听也失败了
解决:

 //因后台接口未返回这两个字段所以需要初始值,否则表单校验规则错乱
        response.data.feeAttributeCode = response.data.feeAttributeCode
          ? response.data.feeAttributeCode
          : '';
        response.data.subjectCodes = response.data.subjectCodes
          ? response.data.subjectCodes
          : '';
### Element UI 输入框最大值和最小值限制 在Element UI中,为了实现`<el-input>`组件的最大值和最小值限制,通常会结合`v-model`指令绑定数据,并通过监听器或其他方式来控制输入范围。然而更推荐的方式是利用内置的表单校验功能。 对于数值类型的输入框,可以使用`type="number"`属性并配合`:min`和`:max`属性直接设定最小区间[^1]: ```html <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <el-form-item label="年龄" prop="age"> <el-input type="number" v-model.number="ruleForm.age" autocomplete="off"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { age: '' }, rules: { age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { min: 0, max: 120, message: '年龄应在0到120之间', trigger: ['blur', 'change'] } ] } }; } }; </script> ``` 上述代码展示了如何创建一个带有基本验证规则的形式控件,其中包含了对年龄字段的必填性和取值区间的约束条件。这里需要注意的是,在定义验证规则时使用的`min`和`max`并不是指字符串长度而是实际数值大小;同时由于`v-model.number`修饰符的作用使得双向绑定的数据自动转换成Number类型从而确保比较操作的有效性[^2]。 如果希望针对文本型输入做字符数目的限定,则应该采用不同的策略——即借助于正则表达式或者计算propety length来进行判断。不过这已经超出了单纯意义上的“最大/最小值”的概念范畴了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值