uni-app使用uni-forms验证遇到的问题

按照uni-app官网设置验证，但遇到一个问题就是一进入页面，输入框没有获取焦点，直接提交表单，会验证通过了，
官方验证：https://uniapp.dcloud.io/component/uniui/uni-forms
解决方法
闹了半天发现是绑定数据的问题
直接把:modelValue="formData"改为 v-model="formData"即可
验证完整代码如下：

                   <uni-forms ref="form" v-model="regForm" :rules="rules" labelWidth="40" validateTrigger="bind"><view class="cu-form-group margin-top  shadow-warp" :class="[shape == 'round' ? 'round' : '']"><uni-forms-item required label="姓名:" name="userName"><uni-easyinput type="text" v-model="regForm.userName" placeholder="请输入姓名" :trim="true" /></uni-forms-item></view><view class="cu-form-group margin-top  shadow-warp" :class="[shape == 'round' ? 'round' : '']"><uni-forms-item required label="手机号:" labelWidth="60" name="telephone"><uni-easyinput type="text" v-model="regForm.telephone" placeholder="请输入手机号" :trim="true" /></uni-forms-item></view><view class="cu-form-group margin-top shadow-warp" :class="[shape == 'round' ? 'round' : '']" style="text-justify: flex-start;"><uni-forms-item required label="密码:" name="password"><uni-easyinput placeholder="请输入密码" :type="!showRegPassword ? 'password' : 'text'" v-model="regForm.password" :trim="true" /></uni-forms-item><view class="action text-lg"><text :class="[showRegPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changeRegPassword"></text></view></view><view class="padding text-center margin-top"><button class="cu-btn bg-green lg margin-right shadow" :loading="loading" :class="[shape == 'round' ? 'round' : '']" @click="onReg"><text space="emsp">{{ loading ? '注册中...' : ' 注册 ' }}</text></button><button class="cu-btn line-green lg margin-left shadow" :loading="loading" :class="[shape == 'round' ? 'round' : '']" @tap="loginWay = 1">去登录</button></view></uni-forms>

         rules: {// 对userName字段进行必填验证userName: {rules: [{required: true,errorMessage: '请输入姓名！'},{minLength: 2,maxLength: 20,errorMessage: '姓名不合法！'}]},telephone: {rules: [{required: true,errorMessage: '请输入手机号！'},{pattern: /^[1]([3-9])[0-9]{9}$/,errorMessage: '手机号不合法！'}]},password: {rules: [{required: true,errorMessage: '请输入密码！'},{minLength: 8,pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,errorMessage: '长度至少为8,至少含有一个字母和一个数字和一个特殊字符'}]}}

       onReg() {this.$refs.form.validate().then(res => {this.regForm.password = Base64.encode(this.regForm.password);this.register({ item: this.regForm }).then(res => {if (res.statusCode) {this.$tip.success('注册成功!');this.$Router.replaceAll({name: 'index'});} else {this.$tip.error(res.data.message);}}).catch(err => {let msg = err.data.responseHeader.errorMessage || '请求出现错误，请稍后再试';this.$tip.error(msg);});}).catch(err => {this.$tip.error('请按要求填写表单!');console.log('表单错误信息：', err);});},

uni-app使用uni-forms验证遇到的问题相关推荐

vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni 微信支付出现支付验证签名失败
uni 在app中支付出现验证签名失败安卓正常 IOS出现这个问题经过对照其他参数排查到 IOS接收时间戳只能接收10位最终左边为正常参数返回这个为问题参数返回提示的错误信息下面为支付 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...

uni-app使用uni-forms验证遇到的问题

uni-app使用uni-forms验证遇到的问题相关推荐

最新文章

热门文章