当前位置: 首页 > 工具软件 > Uni-Form > 使用案例 >

u-form数组验证,循环表单验证

谯振国
2023-12-01

u-form的源码插件只支持对象属性的验证,要支持对象数组的形式只能改源码,话不多说(直接复制即可)

数据类型(要验证location_name)

form:{
     aa:"",
     bb:"",
     details:[
        {location_name:"",},
        {location_name:""}
     ],
}
  1. 找到u-form-item 文件
  2. .找到getRules方法 (验证方法)
//获取验证方法
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);
				});
			},
  1. 使用时修改props
<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"],
   },
],

要验证对象中的对象字段 自行修改,有帮到你的话,点赞支持~~

 类似资料: