按照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);
				});
		},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐