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

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"],
   },
],

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

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在 Vue 表单中对数组进行验证,可以使用 `v-for` 指令循环展示每个数组元素,同时为每个元素绑定一个验证规则。例如,以下示例展示了一个包含多个输入框的表单,其中 `inputs` 是一个数组,每个元素包含 `label` 和 `value` 两个属性,在输入框中输入的值将保存在 `value` 中: ```html <template> <form @submit.prevent="submitForm"> <div v-for="(input, index) in inputs" :key="index"> <label :for="`input-${index}`">{{ input.label }}</label> <input :id="`input-${index}`" type="text" v-model="input.value" :class="{ 'is-invalid': !validateInput(input.value) }" > <div v-if="!validateInput(input.value)" class="invalid-feedback"> 请输入有效的 {{ input.label }} </div> </div> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { inputs: [ { label: "用户名", value: "" }, { label: "密码", value: "" }, { label: "邮箱", value: "" }, ], }; }, methods: { submitForm() { if (this.validateForm()) { // 表单验证通过,提交表单 // ... } }, validateForm() { // 验证整个表单 return this.inputs.every((input) => this.validateInput(input.value)); }, validateInput(value) { // 验证输入框内容是否有效 return Boolean(value.trim()); }, }, }; </script> ``` 在上述示例中,我们为每个输入框绑定了一个 `validateInput` 方法作为验证规则,该方法接受一个参数 `value`,表示输入框中的值。如果输入框的值不符合要求,将为该输入框添加 `is-invalid` 类,同时显示一个错误提示信息。在表单提交时,我们调用 `validateForm` 方法验证整个表单,该方法使用 `every` 方法遍历每个输入框的值,如果所有输入框的值都符合要求,则返回 `true`,否则返回 `false`。在表单提交时,如果 `validateForm` 方法返回 `true`,则表单验证通过,可以提交表单。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值