uview!form表单校验不好用,自定义方法

针对uni-app的uview框架内置表单验证功能不满足需求,本文介绍如何创建自定义验证规则,特别是针对字段非空检查的增强方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//表单校验
	// params form表单对应model rules表单检验rules
			checkRules(params, rules) { 
				for (let key in rules) {
					let arr = rules[key]
					for (let i = 0; i < arr.length; i++) {
						let rule = arr[i],
							val = params[key] === 0 ? '0' : params[key] || ''
						if (rule.required && val === '') { 
							uni.showToast({
								title: rule.message,
								icon: "none"
							});
							return false
						}
					}
				}
				return true
			}

只针对了是否为空 进行了校验

### 如何在 UniApp 中使用 uView 框架进行表单校验 #### 1. 基础环境准备 为了实现表单校验,在项目初始化阶段可以参考 `Straw-Uniapp-uView` 的基础模板[^1],该模板提供了完整的项目结构以及必要的配置文件。确保已安装并引入了最新版本的 uView UI 库。 --- #### 2. 表单组件与校验规则定义 uView 提供了一个强大的表单校验机制,开发者可以通过设置 `rules` 属性来指定各个字段的校验规则。以下是具体实现方式: - **HTML 部分** ```html <template> <view class="form-container"> <!-- 使用 u-form 组件 --> <u-form :model="formData" ref="uFormRef" :rules="validationRules"> <u-form-item label="用户名" prop="username"> <u-input v-model="formData.username" placeholder="请输入用户名"></u-input> </u-form-item> <u-form-item label="密码" prop="password"> <u-input type="password" v-model="formData.password" placeholder="请输入密码"></u-input> </u-form-item> <button @click="submitForm">提交</button> </u-form> </view> </template> ``` --- #### 3. 数据模型与校验规则绑定 在 Vue 实例中定义数据模型 (`formData`) 和校验规则 (`validationRules`)。 - **JavaScript 部分** ```javascript <script> export default { data() { return { formData: { username: '', // 用户名初始值为空 password: '' // 密码初始值为空 }, validationRules: { username: [ { required: true, message: '用户名不能为空', trigger: ['blur'] }, // 非空验证 { min: 4, max: 20, message: '长度应在 4 到 20 字符之间', trigger: ['change', 'blur'] } // 长度范围验证 ], password: [ { required: true, message: '密码不能为空', trigger: ['blur'] }, // 非空验证 { pattern: /^[0-9a-zA-Z]{6,18}$/, message: '密码应为6到18位字母或数字组合', trigger: ['blur'] } // 自定义正则表达式验证 ] } }; }, methods: { submitForm() { this.$refs.uFormRef.validate((valid) => { if (valid) { console.log('表单校验成功:', this.formData); } else { console.error('表单校验失败'); } }); } } }; </script> ``` 上述代码实现了以下功能: - 对 `username` 进行非空和长度范围校验- 对 `password` 进行非空和自定义正则匹配校验[^3]。 --- #### 4. 动态校验场景处理 对于某些动态校验需求(如后端接口返回的结果),可以在校验函数中调用异步逻辑,并通过回调传递错误信息。 - **示例:异步校验** ```javascript methods: { async validateUsername(rule, value, callback) { try { const response = await this.checkUsernameAvailability(value); // 调用后端接口 if (!response.available) { callback(new Error('用户名已被占用')); } else { callback(); // 校验通过 } } catch (error) { callback(new Error('服务器异常,请稍后再试')); } }, checkUsernameAvailability(username) { return new Promise(resolve => setTimeout(() => resolve({ available: !['admin'].includes(username) }), 500)); }, submitForm() { this.$refs.uFormRef.validate(async (valid) => { if (valid) { console.log('表单校验成功:', this.formData); } else { console.error('表单校验失败'); } }); } } ``` 在此部分中,`validateUsername` 方法展示了如何结合异步操作完成复杂校验逻辑[^2]。 --- #### 总结 以上内容涵盖了从静态到动态的多种表单校验场景,能够满足大多数实际开发中的需求。借助 uView 的强大工具集,开发者可以快速构建高效且可靠的前端交互体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值