用js策略模式完成表单验证_js 策略表单校验-CSDN博客

本文链接：https://blog.csdn.net/qq_45225833/article/details/115131506

这篇博客介绍了如何使用JavaScript实现一个简单的前端表单验证功能。通过创建校验类和定义校验策略，对用户名和密码的输入进行有效性检查，确保用户名不为空且密码长度至少为6位。当用户点击提交按钮时，会触发校验过程，如果输入不符合规则，则弹出错误提示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="registerForm">
			<input type="text" name="" id="username" value="" placeholder="用户名" />
			<input type="password" name="" id="password" value="" placeholder="密码" />
<!-- 			<input type="email" name="" id="email" value="" placeholder="邮箱" /> -->
			<button type="button" id="button">提交</button>
		</form>

		<script type="text/javascript">
			const strategies = {
				isNoEmpty: function(value, errorMsg) {
					return value ? '' : errorMsg
				},
				minLength: function(value, errorMsg, length) {
					return value && value.length >= length ? '' : errorMsg
				}
				// isMoble: function(value, errorMsg) {
				// 	return /(^1[3|5|8][0-9]{9}$)/.test(value) ? '' : errorMsg;
				// }
			}

			// 校验类
			const Validator = function() {
				this.rules = []; // 校验规则
			}
			// 添加校验规则到校验池
			Validator.prototype.add = function(dom, rule, errorMsg) {
				const key = Object.keys(rule)[0];
				const value = rule[key]
				this.rules.push(function() {
					// 执行key对应策略
					return strategies[key].apply(null, [dom.value, errorMsg, value])
				})
			}
			// 执行校验池
			Validator.prototype.run = function() {
				for (let i = 0; i < this.rules.length; i++) {
					const msg = this.rules[i]()
					if (msg) return msg;
				}
			}
			// 进行校验
			const validateLoginData = function() {
				const validator = new Validator()
				validator.add(document.getElementById('username'), {
					isNoEmpty: true
				}, '用户名不能为空')
				validator.add(document.getElementById('password'), {
					minLength: 6
				}, '密码最少6位')
				// validator.add(document.getElementById('email'), {
				// 	isMoble: true
				// }, '手机号不正确')
				return validator.run();
			}


			// 绑定事件

			document.getElementById('button').onclick = function() {
				console.log('xxxx')
				var errorMsg = validateLoginData()
				if (errorMsg) {
					alert(errorMsg)
					return false;
				}
			}
		</script>
	</body>
</html>