u-form的源码插件只支持对象属性的验证,要支持对象数组的形式只能改源码,话不多说(直接复制即可)
数据类型(要验证location_name)
form:{
aa:"",
bb:"",
details:[
{location_name:"",},
{location_name:""}
],
}
//获取验证方法
getRules() {
// 父组件的所有规则
let rules = this.parent.rules;
const fil = this.prop.split('.') //["details","0","location_name"]
if(fil.length==3) {
rules = rules ? rules[fil[2]] : [];//获取验证方法 location_name
}else {
rules = rules ? rules[this.prop] : [];
}
// 保证返回的是一个数组形式
return [].concat(rules || []);
},
找到validation方法 (验证的值)
// 校验数据
validation(trigger, callback = () => {}) {
// 检验之间,先获取需要校验的值
const fileds = this.prop.split('.')
if(fileds.length==3) {
//获取要验证的值
this.fieldValue = this.parent.model[fileds[0]][Number(fileds[1])][fileds[2]];
}else {
this.fieldValue = this.parent.model[this.prop];
}
// blur和change是否有当前方式的校验规则
let rules = this.getFilteredRule(trigger);
// 判断是否有验证规则,如果没有规则,也调用回调方法,否则父组件u-form会因为
// 对count变量的统计错误而无法进入上一层的回调
if (!rules || rules.length === 0) {
return callback('');
}
// 设置当前的装填,标识为校验中
this.validateState = 'validating';
// 调用async-validator的方法
let validator = new schema({
[this.prop]: rules
});
validator.validate({
[this.prop]: this.fieldValue
}, {
firstFields: true
}, (errors, fields) => {
// 记录状态和报错信息
this.validateState = !errors ? 'success' : 'error';
this.validateMessage = errors ? errors[0].message : '';
// 调用回调方法
callback(this.validateMessage);
});
},
<u-form-item
class="form-maxwidth"
label="库位名称"
prop="'details.' + index + '.location_name'"
:required="true"
>
<!-- details为对象数组,index为第几个元素,上面肯定有循环的,location_name为验证的值 -->
<u-input
v-model="item._entry_qty"
@input="changeInputnum"
:disabled="item.is_qrcode == 1"
type="digit"
></u-input>
</u-form-item>
注意:rules方法须是要验证值的字段
location_name: [
{
required: true,
message: "入库仓库不能为空",
trigger: ["change", "blur"],
},
],
//补充 如果要和该数组的其它字段相比较的话
location_name: [
{
// 自定义验证函数,见上说明
validator: (rule, value, callback) => {
var mz = rule.field.split('.')//["details","0","location_name"] 可取到details字段 index索引
if () {
callback("提示信息");
} else {
callback();
}
},
// 触发器可以同时用blur和change
trigger: ["change", "blur"],
},
],
要验证对象中的对象字段 自行修改,有帮到你的话,点赞支持~~