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

最新推荐文章于 2024-09-24 15:29:26 发布

原创最新推荐文章于 2024-09-24 15:29:26 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue的问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个具体的场景：在一个表单项中使用三个数值输入框进行数据验证的方法。通过实例展示了如何在Vue.js中利用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，然后我就转为不写字段。
但是我写的这个校验函数还有改进空间，这种写法比较局限且累赘。