更新记录

1.0.0（2025-06-26）

uni.appx表单验证、支持动态表单验证

平台兼容性

uni-app(4.66)

uni-app x(4.71)

kf-forms

rules 规则

model、 rules 和 activeRulers 数据格式参照 uni.app的扩展组件uni-forms 格式 https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html

rules和 activeRulers参数只支持rulesType中的属性

activeRulers为动态表单验证规则

type rulesType = {
    required ?: boolean,
    errorMessage ?: string,
    validateFunction ?: (rule ?: UTSJSONObject, value ?: any, data ?: UTSJSONObject, callback ?: (val ?: string | null) => void) => Boolean | void,
    minLength ?: number,
    maxLength ?: number,
    maximum ?: number,
    minimum ?: number,
}

动态表单验证

<!-- <kf-forms-item :name="formData.xx + index"> index为动态数组的下标 -->

    <view v-for="(item,index) in (formData.info as Array<UTSJSONObject>)" :key="index">
        <text class="kf-form-title">巡检信息{{index+1}}</text>
        <view class="kf-from-group">
            <kf-forms-item :name="'inspectionSite'+index" label="巡检部位" :required="true">
                <input type="text" v-model="item['inspectionSite']"
                    @input="(e:UniInputEvent)=>inputFn(e,'inspectionSite',index)" placeholder="请输入巡检部位"
                    class="form-input" placeholder-class="input-placeholder" />
            </kf-forms-item>
        </view>
    </view>

完整使用示例

<kf-forms :model="formData" :rules="rules" ref="testForm" :activeRulers="activeRulers">
    <view class="kf-from-group">
        <kf-forms-item name="name" label="姓名" :required="true">
            <input type="text" name="name" v-model="formData['name']" placeholder="请输入姓名"
                @input="(e:UniInputEvent)=>inputFn(e,'name',-1)" placeholder-class="input-placeholder"
                class="form-input" />
        </kf-forms-item>
        <kf-forms-item name="unit" label="单位名称" :required="true">
            <input type="text" name="unit" v-model="formData['unit']"
                @input="(e:UniInputEvent)=>inputFn(e,'unit',-1)" placeholder="请输入单位名称" class="form-input"
                placeholder-class="input-placeholder" />
        </kf-forms-item>
        <kf-forms-item name="age" label="年龄" :required="true">
            <input type="text" name="age" v-model="formData['age']"
                @input="(e:UniInputEvent)=>inputFn(e,'age',-1)" placeholder="请输入年龄" class="form-input"
                placeholder-class="input-placeholder" />
        </kf-forms-item>
    </view>
    <!-- 动态表单规则 -->
    <view v-for="(item,index) in (formData.info as Array<UTSJSONObject>)" :key="index">
        <text class="kf-form-title">巡检信息{{index+1}}</text>
        <view class="kf-from-group">
            <kf-forms-item :name="'inspectionSite'+index" label="巡检部位" :required="true">
                <input type="text" v-model="item['inspectionSite']"
                    @input="(e:UniInputEvent)=>inputFn(e,'inspectionSite',index)" placeholder="请输入巡检部位"
                    class="form-input" placeholder-class="input-placeholder" />
            </kf-forms-item>
            <kf-forms-item :name="'promble'+index" label="问题描述" :required="true">
                <view class="textarea-box">
                    <textarea v-model="item['promble']" @input="(e:UniInputEvent)=>inputFn(e,'promble',index)"
                        placeholder="请输入问题描述" class="form-textarea" placeholder-class="input-placeholder"
                        maxlength="2" />
                    <text class="textarea-num">{{(item['promble'].toString()).length}}/200</text>
                </view>
            </kf-forms-item>
        </view>
    </view>
    <!-- <text>{{(formData.test as Ar).a}}</text> -->

    <view class="btn-box">
        <button class="button" @click="addRulers">添加rules</button>
        <button class="button" @click="addActiveForm">新增动态表单</button>
        <button class="button" type="primary" @click="submit">提交</button>
    </view>
</kf-forms>

export default {
    data() {
        return {
            formData: {
                name: "",
                unit: "",
                age: "",
                info: [] as Array<UTSJSONObject>,
                list: [1, 2]
            } as UTSJSONObject,

            nameText: "",
            rules: {
                name: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入姓名',
                        },
                        {
                            errorMessage: '姓名不合法',
                            validateFunction: (rule ?: UTSJSONObject, value ?: any, data ?: UTSJSONObject, callback ?: (val : string) => void) => {
                                if (value != null && (value.toString()).length > 4) {
                                    if (typeof callback == 'function') {
                                        callback("姓名不合法5555")
                                    }
                                    return false
                                } else {
                                    return true
                                }

                                //return false
                            }
                        }

                    ]

                },
                unit: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入单位名称',
                        },
                        {
                            maxLength: 10,
                            errorMessage: '单位名称长度最大为10',
                        }
                    ]
                },
                age: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入年龄',
                        },
                        {
                            errorMessage: '年龄范围在18到60岁之间',
                            maximum: 60,
                            minmum: 18
                        }
                    ]
                },

            } as UTSJSONObject,
            // 活动表单规则
            activeRulers: {
                promble: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入问题描述',
                        },
                        {
                            errorMessage: '问题描述不合法',
                            validateFunction: (rule ?: UTSJSONObject, value ?: any, data ?: UTSJSONObject, callback ?: (val : string) => void) => {
                                if (value != null && (value.toString()).length > 4) {
                                    if (typeof callback == 'function') {
                                        callback("问题描述不合法5555") // 有callback 使用callback 参数作为errorMessage 提示信息
                                    }
                                    return false
                                } else {
                                    return true
                                }

                                //return false
                            }
                        }

                    ]

                },
                inspectionSite: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '请输入巡检部位',
                        },

                    ]

                },
            } as UTSJSONObject,

            testForm: null as KfFormsComponentPublicInstance | null,
        }
    },
    onReady() {
        this.testForm = this.$refs['testForm'] as KfFormsComponentPublicInstance
    },
    onLoad() {

    },
    watch: {
        formData: {
            handler(newVal) {
                //console.log("newVal", newVal)
            },
            deep: true
        }
    },
    methods: {
        inputFn(e : UniInputEvent, name : string, index : number) {
            if (index < 0) {
                this.formData[name] = e.detail.value
                setTimeout(() => {
                    this.testForm?.validateField(name, index, '', null)
                }, 500)
            } else {
                ((this.formData.info as Array<UTSJSONObject>)[index])[name] = e.detail.value
                setTimeout(() => {
                    this.testForm?.validateField(name, index, 'info', (isPass) => {
                        if (isPass) {
                            console.log("验证通过了")
                        } else {
                            console.log("不通过")
                        }
                    })
                }, 500)
            }
            console.log("this.formData.info", this.formData.info)

            // console.log(typeof this.formData[name])

        },
        submit() {
            this.testForm?.validate?.((isPass : boolean) => {
                if (isPass) {
                    console.log("验证通过了")
                } else {
                    console.log("不通过")
                }
            })

        },
        addRulers() {
            ((this.rules.unit as UTSJSONObject)["rules"] as Array<UTSJSONObject>).push({
                maxLength: 10,
                errorMessage: '单位名称长度最大为10',
                trigger: ['change', 'blur']
            })
        },
        addActiveForm() {
            (this.formData['info'] as Array<UTSJSONObject>).push({
                promble: "",
                inspectionSite: ""
            })
        }
    }
}