【前端】没有了element时，怎么实现一个自己的form表单组件和表单校验（用法参考el-form）

需求

平时用习惯了el-form做表单校验，等到做小程序是，不能用element了很不习惯，准备自己手撸一个form表单组件做平替。

代码

form.vue

<template>
    <div class="cwx-form" ref="myForm">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        model: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            requires: {}
        }
    },
    methods: {
        validate() {
            let flag = true;
            function isEmpty(value) {
                // 判断空字符串
                if (typeof value === 'string' && value.trim().length === 0) {
                    return true;
                }
                // 判断空值（null 或 undefined）
                if (value === null || typeof value === 'undefined') {
                    return true;
                }
                // 判断空数组
                if (Array.isArray(value) && value.length === 0) {
                    return true;
                }
                return false;
            }
            const findFormItems = (children) => {
                children.forEach((child) => {
                    if (child.$options.name === 'formItem' && child.require) {
                        //找到需要校验的字段
                        if (isEmpty(this.model[child.prop])) {
                            //如果为空值 需要处理
                            child.warning=true
                            flag=false
                        }else{
                            //如果校验通过，需要恢复
                            child.warning=false
                        }
                    }
                    if (child.$children) {
                        findFormItems(child.$children);
                    }
                });
            };
            findFormItems(this.$children || []);
            return flag
        }
    }
}
</script>

<style></style>

formItem.vue

<template>
    <view class="cwx-form-item" :class="{'warning':warning}">
        <span class="label">
            <span v-if="prefix" class="prefix">{{ prefix }}</span>
            <span v-if="require" class="red">*</span>{{ label }}
            <span v-if="tip" class="tip">{{ tip }}</span>
        </span>
        <slot></slot>
    </view>
</template>

<script>
export default {
    name: 'formItem',
    props:{
        label:{
            type: String,
            default:''
        },
        require:{
            type: Boolean,
            default: false,
        },
        prop:{
            type: String,
            default:''
        },
        tip: {
            type: String,
            default: ''
        },
        prefix: {
            type: String,
            default: ''
        },
    },
    data(){
        return{
            warning: false,
        }
    }
}
</script>

<style lang="scss" scoped>
.cwx-form-item{
    // padding: 0 32rpx;
    min-height: 78rpx;
}
.label{
    font-size: 28rpx;
    line-height: 28rpx;
    color: $uni-text-color;
    line-height: 78rpx;
    .red{
        color: #F53F3F;
    }
    .tip {
        font-size: 24rpx;
        margin-left: 16rpx;
        color: #ABB0AF;
    }
    .prefix {
        color: #ABB0AF;
    }
}
.warning{
    // background: rgba(244, 137, 137, 0.12);
}
</style>

使用

<MyForm class="repair-img" ref="form" :model="form">
              <div style="padding: 0 32rpx">
                <MyFormItem label="维修后图片：" prop="afterfileList" require tip="图片大小不超过5MB">
                  <file-upload
                    class="file-upload"
                    :disabled="isDetail"
                    :fileList="form.afterfileList"
                    @change="(arr)=>{form.afterfileList = arr}"
                  />
                </MyFormItem>
              </div>
          </MyForm>

this.$refs["form"].validate();

分析

因为个人的需求简单，这里只做了必填校验，没有自定义rules的功能；
如果有自定义rules这个需求，可以让form组件多接收一个rules参数，并在validate方法内自行对照字段如rules进行处理。