1.添加rules验证规则(仿elementUI)
let rules = {
dispose: [{
required: true,
message: "请填写处置量"
},
{
pattern: /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,6}\.\d{0,2}$|^[1-9]\d{0,6}$/,
message: "只支持输入8位(包括小数2位)整数"
}
], //处置凭证
disposeAttachList: [{
required: true,
message: "请选择处置凭证"
},
{min:1,max:9,message: "请选择1-9张处置凭证"}
], //处置凭证
disposeDate: [{
required: true,
message: "请选择处置日期"
}], //处置日期
disposeWay: [{
required: true,
message: "请填写处置去向"
},
{
min: 1,
max: 100,
message: "请输入1-100位的处置去向"
}
]
}
2.绑定input或其他组件error.['双向绑定数据名']为message显示
<el-input title="处置去向" model:my-value="{ {disposeWay}}" placeholder="请填写" errorMessage="{ {error.disposeWay}}" onlyRead="{ {onlyRead}}"></el-input>
组件封装详情见另外文章
3.提交时循环验证
formSubmit() {
//表单验证
let flag = 0
if (this.selectComponent('#upload3').data.files) {
this.setData({
disposeAttachList: this.selectComponent('#upload3').data.files
})
}
for (const key in rules) {
for (const item of rules[key]) {
if(item.required && !JSON.stringify(this.data[key])){
this.setData({
[`error.${key}`]: item.message
})
flag++
break
}else if(item.min && (this.data[key].length<item.min||this.data[key].length>item.max)){
this.setData({
[`error.${key}`]: item.message
})
flag++
break
}else if(item.pattern && !item.pattern.test(this.data[key])){
this.setData({
[`error.${key}`]: item.message
})
flag++
break
}
else if(item.space && (/\s/.test(this.data[key]))){
this.setData({
[`error.${key}`]: item.message
})
flag++
break
}
else{
this.setData({
[`error.${key}`]: ""
})
}
}
}
if(flag==0){
//发请求
}
},