weixin_39964660
weixin_39964660
2021-01-04 03:55

在Form表单中校验复杂对象(嵌套属性)

前几个PR半天没动静,这次就不发PR了,还是发个issue记录下,给遇到同样问题的人。

假设有表单对象属性如下:


form: {
  name: {
    firstName: '',
    lastName: '',
  },
}

希望校验这两个值都不为空,则会这样写校验规则:


rules: {
  'name.firstName': {
    required: true,
    message: '请输入姓名',
  },
  'name.lastName': {
    required: true,
    message: '请输入姓名',
  },
},

<u-form-item prop="name.firstName">
  <u-input v-model="form.name.firstName"></u-input>
</u-form-item>
<u-form-item prop="name.lastName">
  <u-input v-model="form.name.lastName"></u-input>
</u-form-item>

但实际使用发现这样定义不起作用。 async-validator的deep rule配置也不起作用。

看u-form-item源码才发现压根就没处理复杂对象的情况,model[prop]这种写法只会把.看作属性的一部分。 因此只能手动修改源码。 uview的表单逻辑基本是照着element写的,所以把element的相关逻辑搬过来即可。

声明工具函数:


  function getPropByPath(obj, path, strict) {
    let tempObj = obj;
    path = path.replace(/\[(\w+)\]/g, '.$1');
    path = path.replace(/^\./, '');

    let keyArr = path.split('.');
    let i = 0;
    for (let len = keyArr.length; i < len - 1; ++i) {
      if (!tempObj && !strict) break;
      let key = keyArr[i];
      if (key in tempObj) {
        tempObj = tempObj[key];
      } else {
        if (strict) {
          throw new Error('please transfer a valid prop path to form item!');
        }
        break;
      }
    }
    return {
      o: tempObj,
      k: keyArr[i],
      v: tempObj ? tempObj[keyArr[i]] : null
    };
  };

resetField方法里: 将


this.parent.model[this.prop] = this.initialValue;

改为


let model = this.parent.model;
        let value = this.fieldValue;
        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }
        let prop = getPropByPath(model, path, true);
        if (Array.isArray(value)) {
          prop.o[prop.k] = [].concat(this.initialValue);
        } else {
          prop.o[prop.k] = this.initialValue;
        }

validation方法里: 将


this.fieldValue = this.parent.model[this.prop];

改为:


 const model = this.parent.model;
        if (!model || !this.prop) { return callback(''); }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

  this.fieldValue = getPropByPath(model, path, true).v;

在mounted回调里: 将


this.initialValue = this.fieldValue;

改为


 let initialValue = this.fieldValue;
          if (Array.isArray(initialValue)) {
            initialValue = [].concat(initialValue);
          }
  this.initialValue = initialValue;

当前版本可以复制以下代码,替换u-form-item.vue全文


<template>
    <view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
        <view class="u-form-item__body" :style="{
            flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
        }">
            <!-- 微信小程序中,将一个参数设置空字符串,结果会变成字符串"true" -->
            <view class="u-form-item--left" :style="{
                width: uLabelWidth,
                flex: `0 0 ${uLabelWidth}`,
                marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
            }">
                <!-- 为了块对齐 -->
                <view class="u-form-item--left__content" v-if="required || leftIcon || label">
                    <!-- nvue不支持伪元素before -->
                    <text v-if="required" class="u-form-item--left__content--required">*</text>
                    <view class="u-form-item--left__content__icon" v-if="leftIcon">
                        <u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
                    </view>
                    <view class="u-form-item--left__content__label" :style="[elLabelStyle, {
                        'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
                    }]">
                        {{label}}
                    </view>
                </view>
            </view>
            <view class="u-form-item--right u-flex">
                <view class="u-form-item--right__content">
                    <view class="u-form-item--right__content__slot ">
                        <slot></slot>
                    </view>
                    <view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
                        <u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
                        <slot name="right"></slot>
                    </view>
                </view>
            </view>
        </view>
        <view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
            paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
        }">{{validateMessage}}</view>
    </view>
</template>

<script>
    import Emitter from '../../libs/util/emitter.js';
    import schema from '../../libs/util/async-validator';
    // 去除警告信息
    schema.warning = function() {};

  function getPropByPath(obj, path, strict) {
    let tempObj = obj;
    path = path.replace(/\[(\w+)\]/g, '.$1');
    path = path.replace(/^\./, '');

    let keyArr = path.split('.');
    let i = 0;
    for (let len = keyArr.length; i < len - 1; ++i) {
      if (!tempObj && !strict) break;
      let key = keyArr[i];
      if (key in tempObj) {
        tempObj = tempObj[key];
      } else {
        if (strict) {
          throw new Error('please transfer a valid prop path to form item!');
        }
        break;
      }
    }
    return {
      o: tempObj,
      k: keyArr[i],
      v: tempObj ? tempObj[keyArr[i]] : null
    };
  };

    /**
     * form-item 表单item
     *  此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
     *  http://uviewui.com/components/form.html
     *  {String} label 左侧提示文字
     *  {Object} prop 表单域model对象的属性名,在使用 validate、resetFields 方法的情况下,该属性是必填的
     *  {Boolean} border-bottom 是否显示表单域的下划线边框
     *  {String} label-position 表单域提示文字的位置,left-左侧,top-上方
     *  {String Number} label-width 提示文字的宽度,单位rpx(默认90)
     *  {Object} label-style lable的样式,对象形式
     *  {String} label-align lable的对齐方式
     *  {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
     *  {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
     *  {Object} left-icon-style 左侧图标的样式,对象形式
     *  {Object} right-icon-style 右侧图标的样式,对象形式
     *  {Boolean} required 是否显示左边的"*"号,这里仅起展示作用,如需校验必填,请通过rules配置必填规则(默认false)
     *  <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
     */

    export default {
        name: 'u-form-item',
        mixins: [Emitter],
        inject: {
            uForm: {
                default () {
                    return null
                }
            }
        },
        props: {
            // input的label提示语
            label: {
                type: String,
                default: ''
            },
            // 绑定的值
            prop: {
                type: String,
                default: ''
            },
            // 是否显示表单域的下划线边框
            borderBottom: {
                type: [String, Boolean],
                default: ''
            },
            // label的位置,left-左边,top-上边
            labelPosition: {
                type: String,
                default: ''
            },
            // label的宽度,单位rpx
            labelWidth: {
                type: [String, Number],
                default: ''
            },
            // lable的样式,对象形式
            labelStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // lable字体的对齐方式
            labelAlign: {
                type: String,
                default: ''
            },
            // 右侧图标
            rightIcon: {
                type: String,
                default: ''
            },
            // 左侧图标
            leftIcon: {
                type: String,
                default: ''
            },
            // 左侧图标的样式
            leftIconStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 左侧图标的样式
            rightIconStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 是否显示左边的必填星号,只作显示用,具体校验必填的逻辑,请在rules中配置
            required: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                initialValue: '', // 存储的默认值
                // isRequired: false, // 是否必填,由于人性化考虑,必填"*"号通过props的required配置,不再通过rules的规则自动生成
                validateState: '', // 是否校验成功
                validateMessage: '', // 校验失败的提示语
                // 有错误时的提示方式,message-提示信息,border-如果input设置了边框,变成呈红色,
                errorType: ['message'],
                fieldValue: '', // 获取当前子组件input的输入的值
                // 父组件的参数,在computed计算中,无法得知this.parent发生变化,故将父组件的参数值,放到data中
                parentData: {
                    borderBottom: true,
                    labelWidth: 90,
                    labelPosition: 'left',
                    labelStyle: {},
                    labelAlign: 'left',
                }
            };
        },
        watch: {
            validateState(val) {
                this.broadcastInputError();
            },
            // 监听u-form组件的errorType的变化
            "uForm.errorType"(val) {
                this.errorType = val;
                this.broadcastInputError();
            },
        },
        computed: {
            // 计算后的label宽度,由于需要多个判断,故放到computed中
            uLabelWidth() {
                // 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true'),意味着要将label的位置宽度设置为auto
                return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this
                    .elLabelWidth)) : '100%';
            },
            showError() {
                return type => {
                    // 如果errorType数组中含有none,或者toast提示类型
                    if (this.errorType.indexOf('none') >= 0) return false;
                    else if (this.errorType.indexOf(type) >= 0) return true;
                    else return false;
                }
            },
            // label的宽度
            elLabelWidth() {
                // label默认宽度为90,优先使用本组件的值,如果没有(如果设置为0,也算是配置了值,依然起效),则用u-form的值
                return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData
                    .labelWidth :
                    90);
            },
            // label的样式
            elLabelStyle() {
                return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle :
                    {});
            },
            // label的位置,左侧或者上方
            elLabelPosition() {
                return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition :
                    'left');
            },
            // label的对齐方式
            elLabelAlign() {
                return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left');
            },
            // label的下划线
            elBorderBottom() {
                // 子组件的borderBottom默认为空字符串,如果不等于空字符串,意味着子组件设置了值,优先使用子组件的值
                return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom;
            }
        },
        methods: {
            broadcastInputError() {
                // 子组件发出事件,第三个参数为true或者false,true代表有错误
                this.broadcast('u-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'));
            },
            // 判断是否需要required校验
            setRules() {
                let that = this;
                // 由于人性化考虑,必填"*"号通过props的required配置,不再通过rules的规则自动生成
                // 从父组件u-form拿到当前u-form-item需要验证 的规则
                // let rules = this.getRules();
                // if (rules.length) {
                //  this.isRequired = rules.some(rule => {
                //      // 如果有必填项,就返回,没有的话,就是undefined
                //      return rule.required;
                //  });
                // }

                // blur事件
                this.$on('on-form-blur', that.onFieldBlur);
                // change事件
                this.$on('on-form-change', that.onFieldChange);
            },

            // 从u-form的rules属性中,取出当前u-form-item的校验规则
            getRules() {
                // 父组件的所有规则
                let rules = this.parent.rules;
                rules = rules ? rules[this.prop] : [];
                // 保证返回的是一个数组形式
                return [].concat(rules || []);
            },

            // blur事件时进行表单校验
            onFieldBlur() {
                this.validation('blur');
            },

            // change事件进行表单校验
            onFieldChange() {
                this.validation('change');
            },

            // 过滤出符合要求的rule规则
            getFilteredRule(triggerType = '') {
                let rules = this.getRules();
                // 整体验证表单时,triggerType为空字符串,此时返回所有规则进行验证
                if (!triggerType) return rules;
                // 历遍判断规则是否有对应的事件,比如blur,change触发等的事件
                // 使用indexOf判断,是因为某些时候设置的验证规则的trigger属性可能为多个,比如['blur','change']
                // 某些场景可能的判断规则,可能不存在trigger属性,故先判断是否存在此属性
                return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1);
            },

            // 校验数据
            validation(trigger, callback = () => {}) {
                // 检验之间,先获取需要校验的值
        const model = this.parent.model;
        if (!model || !this.prop) { return callback(''); }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

                this.fieldValue = getPropByPath(model, path, true).v;
                // 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
            resetField() {
        let model = this.parent.model;
        let value = this.fieldValue;
        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }
        let prop = getPropByPath(model, path, true);
        if (Array.isArray(value)) {
          prop.o[prop.k] = [].concat(this.initialValue);
        } else {
          prop.o[prop.k] = this.initialValue;
        }
                // 设置为`success`状态,只是为了清空错误标记
                this.validateState = 'success';
            }
        },

        // 组件创建完成时,将当前实例保存到u-form中
        mounted() {
            // 支付宝、头条小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环应用
            this.parent = this.$u.$parent.call(this, 'u-form');
            if (this.parent) {
                // 历遍parentData中的属性,将parent中的同名属性赋值给parentData
                Object.keys(this.parentData).map(key => {
                    this.parentData[key] = this.parent[key];
                });
                // 如果没有传入prop,或者uForm为空(如果u-form-input单独使用,就不会有uForm注入),就不进行校验
                if (this.prop) {
                    // 将本实例添加到父组件中
                    this.parent.fields.push(this);
                    this.errorType = this.parent.errorType;
                    // 设置初始值
          let initialValue = this.fieldValue;
          if (Array.isArray(initialValue)) {
            initialValue = [].concat(initialValue);
          }
                    this.initialValue = initialValue;
                    // 添加表单校验,这里必须要写在$nextTick中,因为u-form的rules是通过ref手动传入的
                    // 不在$nextTick中的话,可能会造成执行此处代码时,父组件还没通过ref把规则给u-form,导致规则为空
                    this.$nextTick(() => {
                        this.setRules();
                    })
                }
            }
        },

        // 组件销毁前,将实例从u-form的缓存中移除
        beforeDestroy() {
            // 如果当前没有prop的话表示当前不要进行删除(因为没有注入)
            if (this.parent && this.prop) {
                this.parent.fields.map((item, index) => {
                    if (item === this) this.parent.fields.splice(index, 1);
                })
            }
        },
    };
</script>

<style lang="scss" scoped>
     "../../libs/css/style.components.scss";

    .u-form-item {
         vue-flex;
        // align-items: flex-start;
        padding: 20rpx 0;
        font-size: 28rpx;
        color: $u-main-color;
        box-sizing: border-box;
        line-height: $u-form-item-height;
        flex-direction: column;

        &__border-bottom--error:after {
            border-color: $u-type-error;
        }

        &__body {
             vue-flex;
        }

        &--left {
             vue-flex;
            align-items: center;

            &__content {
                position: relative;
                 vue-flex;
                align-items: center;
                padding-right: 10rpx;
                flex: 1;

                &__icon {
                    margin-right: 8rpx;
                }

                &--required {
                    position: absolute;
                    left: -16rpx;
                    vertical-align: middle;
                    color: $u-type-error;
                    padding-top: 6rpx;
                }

                &__label {
                     vue-flex;
                    align-items: center;
                    flex: 1;
                }
            }
        }

        &--right {
            flex: 1;

            &__content {
                 vue-flex;
                align-items: center;
                flex: 1;

                &__slot {
                    flex: 1;
                    /* #ifndef MP */
                     vue-flex;
                    align-items: center;
                    /* #endif */
                }

                &__icon {
                    margin-left: 10rpx;
                    color: $u-light-color;
                    font-size: 30rpx;
                }
            }
        }

        &__message {
            font-size: 24rpx;
            line-height: 24rpx;
            color: $u-type-error;
            margin-top: 12rpx;
        }
    }
</style>

该提问来源于开源项目:YanxinNet/uView

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_39950812 weixin_39950812 3月前

    非常感谢,解决了我的问题

    点赞 1 评论 复制链接分享
  • weixin_39715187 weixin_39715187 3月前

    同样的问题 现在Form表单相当于是个摆设

    点赞 评论 复制链接分享
  • weixin_39553458 weixin_39553458 3月前

    我也有同样的问题,但是我不想修改源码,不然以后不好升级了,我用的后端参数替换...

    点赞 评论 复制链接分享
  • weixin_39964660 weixin_39964660 3月前

    我也有同样的问题,但是我不想修改源码,不然以后不好升级了,我用的后端参数替换...

    想多了,uview 1.X版本基本不会有什么升级了,即使有,这就是单个文件几行改动,对比一下变更都一目了然了

    点赞 评论 复制链接分享