关于uview小程序表单校验不生效问题，以及小程序自定义校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于uview小程序表单校验不生效问题，以及小程序自定义校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架

官网例子

rules: {
	name: [
		// 必填规则
		{
			required: true,
			message: '此为必填字段',
			// blur和change事件触发检验
			trigger: ['blur', 'change'],
		},
		// 正则判断为字母或数字
		{
			pattern: /^[0-9a-zA-Z]*$/g,
			// 正则检验前先将值转为字符串
			transform(value) {
				return String(value);
			},
			message: '只能包含字母或数字'
		},
		// 6-8个字符之间的判断
		{
			min: 6,
			max: 8,
			message: '长度在6-8个字符之间'
		},
		// 自定义规则判断是否包含字母"A"
		{
			validator: (rule, value, callback) => {
				return uni.$u.test.contains(value, "A");
			},
			message: '必须包含字母"A"'
		},
		// 校验用户是否已存在
		{
			asyncValidator: (rule, value, callback) => {
				uni.$u.http.post('/xxx/xxx', {name: value}).then(res => {
					// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
					if(res.error) {
						callback(new Error('姓名重复'));
					} else {
						// 如果校验通过，也要执行callback()回调
						callback();
					}
				})
			},
			// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
			// message: 'xxx'
		}
	]
}

编写完了之后发现正则这块不生效

是因为不兼容，如果需要兼容小程序

需要加上

this.$refs.$form.setRules(this.rules)

即可解决

如果校验还没生效请检查标签是否填入必要的属性文章来源地址https://www.toymoban.com/news/detail-737032.html

<u--form ref="$form" labelPosition="left" :model="form" labelWidth="140rpx" :rules="rules">
    <u-form-item label="姓名" prop="name">
		<u--input v-model="form.name" placeholder="请输入姓名"></u--input>
	</u-form-item>
</u--form>

到了这里，关于关于uview小程序表单校验不生效问题，以及小程序自定义校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！