uview表单校验不生效问题

最近几次使用发现有时候会不生效,具体还没排查出来什么原因,先记录一下解决使用方法

html 复制代码
<u--form
	labelPosition="top"
	labelWidth="auto"
	:model="form"
	:rules="rules"
	ref="uForm"
>
	<view class="form-item">
		<view class="form-remark">
			<u-form-item
				label="反馈与建议"
				prop="contents"
				:borderBottom="false"
				:required="true"
				ref="item1"
			>
				<u--textarea
					v-model="form.contents" 
					placeholder="您填写的信息越全,问题越可有效解决哦~" 
					:count="true"
					maxlength="300"
					border="none"
					disableDefaultPadding="true"
					:placeholderStyle="{'fontSize':'28rpx;'}"
				></u--textarea>
			</u-form-item>
		</view>
	</view>
	<view class="form-item">
		<view class="form-remark">
			<u-form-item
				label="手机号"
				labelPosition="left"
				prop="phonenumber"
				:borderBottom="false"
				ref="item1"
			>
				<u-input
					placeholder="请输入手机号"
					border="none"
					v-model="form.phonenumber"
					:customStyle="{
						'line-height':'100rpx',
						'padding-bottom':'5px'
					}"
					color="#666"
					fontSize="14"
				></u-input>
			</u-form-item>
		</view>
	</view>
</u--form>
js 复制代码
<script>
export default {
	data() {
		return {
		form:{
			contents: null, // 备注
				phonenumber: null, 
				url: ''
			},
			rules: {
				'contents': {
					required: true,
					message: '请填写描述信息',
					trigger: ['blur', 'change']
				},
				'phonenumber': {
					required: true, 
					validator: (rule, value, callback) => {
						// 上面有说,返回true表示校验通过,返回false表示不通过
						return uni.$u.test.mobile(value);
					},
					message: '手机号码格式不正确',
					// 触发器可以同时用blur和change
					trigger: 'change',
				},
			},
		}
	},
	onReady() {
		//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
}	
</script>

需要注意的是(有待验证):

  1. 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规 this.$refs.uForm.setRules(this.rules),如果是页面就写在onReady 里,如果是组件需要写在mounted
  2. prop 用contents可以正确校验,用form.contents好像不能正确校验
相关推荐
jktantan8 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
2601_962885729 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel10 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓10 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人10 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every10 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad11 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新11 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易12 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员
风骏时光牛马13 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端