uview form 校验

{
			// 自定义验证函数,见上说明
			validator: (rule, value, callback) => {
				// 上面有说,返回true表示校验通过,返回false表示不通过
				// uni.$u.test.mobile()就是返回true或者false的
				return uni.$u.test.mobile(value);
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}

是否验证码
console.log(uni.$u.test.code('4567', 4));

是否数组
console.log(uni.$u.test.array([1, 2, 3]));

是否Json字符串
console.log(uni.$u.test.jsonString('{"a": 1}'));

是否对象
console.log(uni.$u.test.object({a: 1}));

是否邮箱号
console.log(uni.$u.test.email('123465798@gmail.com'));

是否手机号
console.log(uni.$u.test.mobile('13845678900'));

是否URL
console.log(uni.$u.test.url('http://www.uviewui.com'));

isEmpty(value)
校验值是否为空,返回true或者false。

console.log(uni.$u.test.isEmpty(false));

是否普通日期
console.log(uni.$u.test.date('2020-02-10 08:32:10'));

是否十进制数值
console.log(uni.$u.test.number('2020'));
1
是否整数
console.log(uni.$u.test.digits('2020'));

是否身份证号
console.log(uni.$u.test.idCard('110101199003070134'));

是否车牌号
console.log(uni.$u.test.carNo('京A88888'));

是否金额
console.log(uni.$u.test.amount('3,233.08'));

是否汉字
console.log(uni.$u.test.chinese('更上一层楼'));

是否字母
console.log(uni.$u.test.letter('uView'));

是否字母或者数字
console.log(uni.$u.test.enOrNum('uView'));

是否包含某个值
console.log(uni.$u.test.contains('uView', 'View'));

数值是否在某个范围内
console.log(uni.$u.test.range(35, [30, 34]));

字符串长度是否在某个范围内
console.log(uni.$u.test.rangeLength('abc', [3, 10]));
 

### 如何在 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、付费专栏及课程。

余额充值