form 正常的表单校验参见官方文档就能解决,我这里整理一下非官方的一些写法:
1. 正常的js校验(html忽略)
Vue-JS:
data() {
let num = (rule, value, callback)=>{
if (value != null) {
if (!/^[0-9]*$/.test(value)) {
callback(new Error('请不要输入除数字以外的字符'));
return;
}
if (parseInt(value) < 6) {
callback(new Error('请输入6位以上纯数字'));
return;
}
}
if (value == '' || value == null) {
callback(new Error('请填写数字'));
return;
}
callback();
}
return {
form:{
num: '',
}
rules: {
num: [{required: true, validator: num , trigger: 'blur'}],
},
}
}
2.动态表单HTML内进行 js逻辑校验
HTML:
<el-form :model="formData" ref="formRef" :rules="formRule">
<div v-for="(item, index) in formData.list" :key="index" >
<el-form-item
label="code:"
prop="code"
:rules="[
{ required: true, validator: (rule, value, callback) => {
if (formData.list[index].code == '') {
return callback('串碼不能为空');
}
callback();
}, trigger: 'blur' }
]"
>
<el-input v-model="formData.list[index].code" placeholder="请输入code"></el-input>
</el-form-item>
</div>
</el-form>