b***@163.com
b***@163.com
  • 发布:2021-07-13 23:11
  • 更新:2021-07-14 10:47
  • 阅读:155

#插件讨论# 【 uni-forms 表单 - DCloud前端团队 】一直在报错

分类:uni-app

HbuildX 3.1.22.20210709
uni-forms 1.2.0
login.nvue / login.vue,都试过,同样的问题

<template>  
    <view class="wrap">  
        <!-- 背景 -->  
        <image class="login-bg" mode="widthFix" src="/static/img/user/newlogin.png"></image>  
        <view class="login-box">  
            <!-- 输入 -->  
            <view class="login-box-border flex-column">  
                <image class="login-box-logo" mode="widthFix" src="/static/img/user/newlogo.png"></image>  
                <text class="login-box-title">济南建筑产业工人实训考核平台</text>  
                <uni-forms :rules="rules" v-model="formData" ref="form" validate-trigger="bind" err-show-type="undertext">  
                    <uni-forms-item name="mobile">  
                        <uni-easyinput v-model="formData.mobile" class="login-box-input login-box-input__mobile" prefixIcon="person" type="number" confirmType="next" maxlength="11" placeholder="请输入手机号" ></uni-easyinput>  
                    </uni-forms-item>  
                    <uni-forms-item name="code">  
                        <uni-easyinput v-model="formData.code" class="login-box-input login-box-input__code" prefixIcon="locked" type="number" maxlength="4" placeholder="验证码" ></uni-easyinput>  
                    </uni-forms-item>  
                </uni-forms>  
                <button class="login-box-login flex-column" @click="submitForm('form')">  
                    <text class="login-box-login-text">登录/注册</text>  
                </button>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data () {  
        return {  
            formData: {  
                mobile: '',  
                code: ''  
            },  
            rules: {  
                mobile: [{  
                    required: true,  
                    errorMessage: '请输入手机号'  
                }, {  
                    minLength: 11,  
                    maxLength: 11,  
                    errorMessage: '请输入正确的手机号'  
                }],  
                code: [{  
                    required: true,  
                    errorMessage: '请输入验证码'  
                }, {  
                    minLength: 4,  
                    maxLength: 4,  
                    errorMessage: '请输入正确的验证码'  
                }]  
        }  
        }  
    },  
    methods: {  

        /**  
         * 手动提交  
         * @param {Object} form  
         */  
        submitForm(form) {  
            // console.log(this.formData);  
            this.$refs[form]  
                .validate()  
                .then(res => {  
                    console.log('表单的值:', res)  
                    uni.showToast({  
                        title: '验证成功'  
                    })  
                })  
                .catch(errors => {  
                    console.error('验证失败:', errors)  
                })  
        },  
    }  
}  
</script>
2021-07-13 23:11 负责人:DCloud_UNI_HT 分享
已邀请:

最佳回复

DCloud_UNI_HT

DCloud_UNI_HT

rules 结构不对,应该是

rules: {    
                mobile: :{  
                   rules:[{    
                       required: true,    
                       errorMessage: '请输入手机号'    
                    }, {    
                        minLength: 11,    
                        maxLength: 11,    
                        errorMessage: '请输入正确的手机号'    
                }]  
},    

        }  
9***@qq.com

9***@qq.com

你把报错信息发出来看看,要不然不好找问题

  • b***@163.com (作者)

    楼下已解决,非常谢谢

    2021-07-14 10:56

要回复问题请先登录注册