cathayIT
cathayIT
  • 发布:2022-05-25 23:35
  • 更新:2022-06-17 10:09
  • 阅读:556

#插件讨论# 【 uni-forms 表单 - DCloud前端团队 】一直报错child.triggerCheck is not a function

分类:uni-app
<template>  
    <view>  
        <view class="insureUser">  
            <uni-forms ref="insureUserForm" :modelValue="user.insureUser" :rules="rules">  
                <uni-forms-item label="投保人姓名" required>  
                    <uni-easyinput :inputBorder="false" class="textright"   
                        v-model="user.insureUser.CUST_NAME" placeholder="请输入姓名" />  
                </uni-forms-item>  

                <uni-forms-item label="证件号码" name="ID_NO" required>  
                    <uni-easyinput :inputBorder="false" class="textright"  
                        v-model="user.insureUser.ID_NO" placeholder="请输入证件号码" />  
                </uni-forms-item>  

                <uni-forms-item label="性别" required>  
                    <uni-data-checkbox class="textright" v-model="user.insureUser.GENDER"  
                        :localdata="genderList" ></uni-data-checkbox>  
                </uni-forms-item>  
                <uni-forms-item label="出生日期" required>  
                    <uni-easyinput :inputBorder="false" class="textright"   
                        v-model="user.insureUser.BIRTHDAY" placeholder="请输入出生日期" />  
                </uni-forms-item>  

                <uni-forms-item label="手机号码" required>  
                    <uni-easyinput :inputBorder="false"  class="textright"  
                        v-model="user.insureUser.MOBILE" placeholder="请输入手机号码" />  
                </uni-forms-item>  
                <uni-forms-item label="电子邮箱" name="EMAIL">  
                    <uni-easyinput :inputBorder="false" class="textright" v-model="user.insureUser.EMAIL"  
                        placeholder="用于接收电子保单" />  
                </uni-forms-item>  
                <uni-forms-item required label="工作单位" name="JOB_WK_PLACE">  
                    <uni-easyinput :inputBorder="false"  class="textright"  
                        maxlength="20" v-model="user.insureUser.JOB_WK_PLACE" placeholder="请输入工作单位" />  
                </uni-forms-item>  
                <uni-forms-item required label="工作内容描述" name="JOB_DESCRP">  
                    <uni-easyinput :inputBorder="false" class="textright"  
                        maxlength="20" v-model="user.insureUser.JOB_DESCRP" placeholder="请输入工作内容描述" />  
                </uni-forms-item>  

            </uni-forms>  
            <button type="primary" @click="submitrrr('insureUserForm')">提交</button>  
        </view>  
    </view>  
</template>  
<script>  
    import code from '@/common/code.js'  
    import common from '@/common/common.js';  
    export default {  
        data() {  
            return {  
                isReadOnly: false, //input控件是否只读  
                user: { // 投保人信息  
                    insureState: {  
                        userType: '', //用户角色(为了给职享安康产品使用)  
                        insureUserType: '0',  
                        insureUserShow: true  
                    },  
                    insureUser: new code.userSupplement(),  
                },  
                genderList: [{  
                    text: '男',  
                    value: '1',  

                }, {  
                    text: '女',  
                    value: '2',  

                }],  
                childList: [{  
                    text: '未育',  
                    value: '0'  
                }, {  
                    text: '已育',  
                    value: '1'  
                }],  
                rules: { // 校验规则  
                    // 对name字段进行必填验证  

                    ID_NO: {  
                        rules: [{  
                            required: true,  
                            errorMessage: '请输入证件号码',  
                        }, {  
                            validateFunction: function(rule, value, data, callback) {  
                                let msg = common.idtpCheckMsg(data.ID_TYPE, value, data.BIRTHDAY, data.GENDER);  
                                if (msg) {  
                                    callback(msg);  
                                }  
                                return true  
                            }  
                        }],  
                    },  

                    // 对email字段进行必填验证  
                    EMAIL: {  
                        rules: [{  
                            format: 'email',  
                            errorMessage: '域名格式错误'  
                        }],  
                    },  

                    JOB_WK_PLACE: {  
                        rules: [{  
                            required: true,  
                            errorMessage: '请输入工作单位',  
                        }, {  
                            validateFunction: function(rule, value, data, callback) {  
                                if (!common.isWordSpace(value)) {  
                                    callback('不能含有特殊字符,或者不少于2个字不大于20个字');  
                                }  
                                return true  
                            }  
                        }],  
                    },  
                    JOB_DESCRP: {  
                        rules: [{  
                            required: true,  
                            errorMessage: '请输入工作内容描述',  
                        }, {  
                            validateFunction: function(rule, value, data, callback) {  
                                if (!common.isJobDescrp(value)) {  
                                    callback('只能输入2至20个中文汉字');  
                                }  
                                return true  
                            }  
                        }],  
                    },  

                }  

            }  
        },  
        onReady() {  
            let that = this;  
            // 需要在onReady中设置规则  
            that.$refs.insureUserForm.setRules(that.rules);  

        },  
        methods: {  
            submitrrr(ref) {  
                this.$refs[ref].validate().then(res => {  
                    console.log('success', res);  
                    uni.showToast({  
                        title: `校验通过`  
                    })  
                }).catch(err => {  
                    console.log('err', err);  
                })  
            },  
        }  
    }  
</script>  
2022-05-25 23:35 负责人:DCloud_UNI_HT 分享
已邀请:
1***@qq.com

1***@qq.com

老哥,解决了吗,我也遇到这个问题

  • cathayIT (作者)

    嗯 解决了,你把你需要做表单的这块,单独做个demo测试,这样比较容易看出问题。

    2022-06-23 10:55

要回复问题请先登录注册