一个el-form-item下多个el-input-number的校验

主要记录自己在平时遇到的已解决的问题
这次的问题主要场景是新建时,要求一个el-form-item下有三个el-input-number,并且要校验。
以下是最终版:
template里的内容

<el-form-item label="次数要求" prop="Frequency">
        <div>
        	<span>次数一:</span><el-input-number v-model="DialogForm.Frequency[0]" :min="0" :max="100" :precision="0"></el-input-number></div>
        <div class="Style">
        	<span>次数二:</span><el-input-number v-model="DialogForm.Frequency[1]" :min="0" :max="100" :precision="0"></el-input-number></div>
        <div>
        	<span>次数三:</span><el-input-number v-model="DialogForm.Frequency[2]" :min="0" :max="100" :precision="0" ></el-input-number></div>
</el-form-item>

script里的校验

export default {
  data() {
    var newRule=(rule, value, callback)=>{
      if(value[0] === undefined || value[1] === undefined || value[2] === undefined){
        callback(new Error(rule.message || '请选择或者输入次数'))
      }else{
        callback()
      }
    }
  
    return {
      DialogForm: {
        Frequency:[0,0,0]
      },
      
      rules: {
          Frequency: [
            {validator: newRule ,trigger:['blur','change']}
          ]        
       }
    };

最初的时候,我写的v-model是用的三个具体的字段代替,比如v-model=“DialogForm.Frequency.FirstNumber”,但是我在写校验函数时,发现value里有字段,但是写出来会报undefined,然后我就转为不写字段。
但是我写的这个校验函数还有改进空间,这种写法比较局限且累赘。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form-itemElement UI中的表单组件,用于包装表单中的每个表单项。在表单中,我们可能需要对深层对象进行校验,这时候可以使用自定义校验规则来实现。 以下是一个示例代码,演示了如何对深层对象进行校验: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="地址" prop="address"> <el-input v-model="form.address"></el-input> </el-form-item> <el-form-item label="详细地址" prop="detail.address"> <el-input v-model="form.detail.address"></el-input> </el-form-item> <el-form-item label="邮编" prop="detail.zip"> <el-input v-model.number="form.detail.zip"></el-input> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '', address: '', detail: { address: '', zip: '' } }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' } ], address: [ { required: true, message: '请输入地址', trigger: 'blur' } ], 'detail.address': [ { required: true, message: '请输入详细地址', trigger: 'blur' } ], 'detail.zip': [ { required: true, message: '请输入邮编', trigger: 'blur' }, { type: 'number', message: '邮编必须为数字值' } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { alert('校验通过') } else { alert('校验失败') return false } }) } } } </script> ``` 在上述代码中,我们使用了prop属性来指定表单项对应的数据模型属性,使用rules属性来指定校验规则。对于深层对象,我们可以使用点号来指定属性路径,例如'detail.address'表示form对象中的detail属性的address属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值