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);
				});
		},
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值