表单自定义校验函数

最新推荐文章于 2026-05-11 11:10:37 发布

原创最新推荐文章于 2026-05-11 11:10:37 发布 · 618 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

8 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客介绍了如何在JavaScript中实现复杂表单的验证，包括对象嵌套对象的场景。作者创建了一个名为`rules.js`的文件，其中包含`checkRules`函数，用于遍历并检查表单字段是否符合预设的校验规则。如果表单验证失败，会显示错误提示；若所有规则都通过，则返回`true`。示例中展示了如何引用和调用这个验证方法。

对于复杂表单类型，如表单对象嵌套一个对象
1.创建 rules.js 文件

let common = {
	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",
						mask: true
					});
					return false
				}
				if (rule.pattern && !rule.pattern.test(val)) { //正则
					uni.showToast({
						title: rule.message,
						icon: "none",
						mask: true
					});
					return false
				}
			}
		}
		return true
	}
}
export default common;

2.引用此文件
import rules from ‘@/common/rules.js’
3.调用方法：let flag = rules.checkRules(this.form, this.rules)
this.form为表单对象 this.rules 为定义的校验规则
flag返回true 校验通过否则弹出错误信息

标签

#javascript #开发语言 #ecmascript