element表单数组校验问题(包含最大小值问题)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
给数组表单校验时候要注意 ,使用一层对象包裹一下,而不能直接用数组
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: …trigger: 'blur'}̲] }, …/ ,message: ‘格式不对’,trigger: ‘blur’}]
},
flowInfo:{
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)