element表单数组校验问题（包含最大小值问题）

最新推荐文章于 2024-03-28 18:00:49 发布

xiaohuihui_z

最新推荐文章于 2024-03-28 18:00:49 发布

阅读量5.6k

点赞数 1

分类专栏： element

本文链接：https://blog.csdn.net/xiaohuihui_z/article/details/103420330

版权

element 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

给数组表单校验时候要注意，使用一层对象包裹一下，而不能直接用数组
ruleForm:{
levelList:[]
},

div class="allocation">
    <el-row class="allocation " :gutter="10">
      <el-col :span="12" >
        <div class="container">
          <div class="common_title fl">
            <div class="line"></div>
            <div class="name">积分管理</div>
          </div>
          <el-table
          :data="scoreList"
          v-loading="loading"
          element-loading-text="拼命加载中"
          stripe>
          <el-table-column prop="score" label="分数" width=""></el-table-column>
          <el-table-column prop="memberCount" label="人数分布" width=""></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12" >
        <div class="container">
          <div class="common_title fl">
            <div class="line"></div>
            <div class="name">积分划分</div>
          </div>
          <el-button type="primary" class=" fr" size="small" @click="submitAward" :loading="subLoading"> 提交</el-button>
          <el-form  ref="ruleForm"  :model="ruleForm">`
            <el-table   :data="ruleForm.levelList">
              <el-table-column width="220px" prop="awardName" label="档次名称"></el-table-column>
              <el-table-column prop="lowScore" label="积分下限">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'levelList.' + scope.$index + '.lowScore'"
                    :rules="rules.lowScore">
                    <el-input type="number" :max="scope.row.highScore"
                      class="light-blue-theme" :autofocus="true" @focus="getIndex(scope.$index)"
                      clearable v-model="scope.row.lowScore"
                      placeholder="积分下限"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="highScore" label="积分上限">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'levelList.' + scope.$index + '.highScore'"
                    :rules="rules.lowScore">
                    <el-input min="lowScore" type="number" focus="getIndex(scope.$index)"
                      class="light-blue-theme" :min="scope.row.lowScore"
                      clearable v-model="scope.row.highScore"
                      placeholder="积分上限"/>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>

<script>
'@/components/api/index'
    export default {
        name: "",

      data(){
        var validatePass = (rule, value, callback) => {
        **【注】**不能使用focus的方式获取焦点，因为点击提交时候，由于是单个index，所以只要有不符合条件的 会把即使符合条件的也给提示（不符合条件）；
        改进方法如下; 通过这种方式获取索引
         var start = rule.fullField.indexOf('.');
        var end = rule.fullField.lastIndexOf('.');
        var index = rule.fullField.slice(start+1,end)
          if (value === '') {
            callback(new Error('请输入积分'));
          } else if (this.ruleForm.levelList[index].lowScore >this.ruleForm.levelList[index].highScore){
            callback(new Error('积分下限不能大于积分上限的值'));

          }else{
            callback();
          }
        };
       
        return {
          scoreList:[],
          index:'',
          ruleForm:{
            levelList:[]
          },

          subLoading:false,
          loading:false,
          rules:{
            lowScore:[
              { validator: validatePass, trigger: 'blur'}
            ]
          }
        }
      },
      mounted(){

      },
      methods:{
        getIndex(index){
          this.index = index;
          console.log('index',index)
        },
       
      },
    }
</script>

另附一个正则的校验类似金钱格式的（100,234,13）有逗号校验的
moneyGroupRules: {
moneyGroupNum: [{required: true, message: '不能为空 ', trigger: ‘blur’},{ pattern:/((^{(-?[1-9]{1}[0-9]{0,2})(\d+|(,{1}\d{3})+)(.\d{0,2}))|(}(-?[1-9]{1}[0-9]{0,}))|(^([0]{1}))|((-?[1-9]{1}[0-9]{0,})((.\d{0,2})))|(^{(-?([0]{1}))((.\d{0,2})))|(}(-?[1-9]{1}[0-9]{0,2})(\d+|(,{1}\d{3})+))) $KaTeX parse error: Expected 'EOF', got '}' at position 35: \dotstrigger: 'blur'}̲] }, \dots$ / ,message: ‘格式不对’,trigger: ‘blur’}]
},
flowInfo:{