JavaScript表单基本验证

js表单基本验证技术

  • 1.正则表达式
  • 2.表单验证
    • 2.1表单验证的作用
    • 2.2表单验证思路
  • 3.文本框对象
  • 4.表单验证
    • 4.1if实现验证
    • 4.2正则表达式实现验证

想要验证用户输入的东西是否符合规则就要先用正则表达式给他设置个规则,使用先来看看正则表达式的符号

1.正则表达式

  1. 正则表达式基本书写符号
    JavaScript表单基本验证_第1张图片
  2. 正则表达式限定符
    限定符将可选数量的数据添加到正则表达式,下表为常用限定符:
    JavaScript表单基本验证_第2张图片
  3. 常用的限定符
    JavaScript表单基本验证_第3张图片
  4. 正则表达式中的部分匹配字符集
    JavaScript表单基本验证_第4张图片

2.表单验证

2.1表单验证的作用

JavaScript表单基本验证_第5张图片

  • 减轻服务器的压力
    如果没有表单验证那么用户输入的账号密码就要先发送到服务器验证,这样的话如果同时有多个设备同时发送请求那么就会很影响性能。
  • 保证输入的数据符合要求
    如果我们在用户输入的时候就开始验证,要是符合规则的话我们就可以直接发送到服务器这样服务器就不需要验证了直接可以接收了。

2.2表单验证思路

当输入的表单数据不符合要求时,可以使用以下方法进行提示:

  1. 获得表单元素值
  2. 使用JavaScript的一些方法对数据进行判断
  3. 当表单提交时,触发 onsubmit事件,对获取的数据进行验证

3.文本框对象

文本框对象的属性、方法和事件
JavaScript表单基本验证_第6张图片

4.表单验证

4.1if实现验证

以下是if判断实现一个弹出框效果的表单验证

<body>
		<!-- 注册 -->
		<!-- onsubmit 点击提交按钮的时候触发 -->
		<form action="注册成功.html" onsubmit="return checkName()">
			<div>
				<label>
					账号:<input id="name" type="text" />
				</label>
			</div>
			<div>
				<label>
					密码:<input id="pwd" type="password" />
				</label>
			</div>
			<div>
				<label> <!-- //type这里也可以写email:邮箱格式 -->
					邮箱:<input id="email" type="text" />
				</label>
			</div>
			<button type="submit">注册</button>
			<button type="reset">清空/重置</button>
		</form>
	</body>
	<script type="text/javascript">
		function $(id) {
			//通过id获取组件并且返回
			return document.getElementById(id)
		}
		//验证账号和密码验证
		function checkName() {
			// 1.账号验证
			//获取账号组件
			var name = $("name").value;
			//判断账号是否为空     什么也没有就是空白字符串 ""
			if ("" == name) {
				alert("账号不能为空");
				return false;
			} else { //否则,用户输入了内容。做进一步的验证:账号长度必须在6-10范围
				if (name.length < 6 || name.length > 10) {
					alert("账号长度必须在6-10范围")
					return false;
				}
			}

			//账号必须是数字和大小写的英文字母+_组合
			// 2.密码验证
			//2.获取密码组件
			var pwd = $("pwd").value;
			//判断密码是否为空     什么也没有就是空白字符串 ""
			if ("" == pwd) {
				alert("账号不能为空");
				return false;
			}

			//3.邮箱验证
			//获取邮箱
			var myEmail = $("email").value;
			if ("" == myEmail) {
				alert("邮箱不能为空");
				return false;
			} else { //用户输入了邮箱内容,进一步的验证邮箱的内容是否符合规则
				//必须有	@和点,并且@在点前面
				var e1 = myEmail.indexOf("@");
				var e2 = myEmail.indexOf(".");
				if (e1 == -1 || e2 == -1) {
					alert("少了个@或.");
					return false;
				} else { //用户输入了@和点,进一步的验证@要在点前面
					if (e1 > e2) {
						alert("@要在.前面");
						return false;
					}
				}
			}
		}
	</script>

4.2正则表达式实现验证

这个效果的提示是在文本框的旁边提示的这个里面添加了事件当输入完账号时继续输入密码的时候账号不符合规则它就会提示
在这里插入图片描述
以下是通过正则表达式实现的表单验证

<!-- 注册 -->
	<!-- onsubmit 点击提交按钮的时候触发 -->
	<!-- onkeyup:键盘事件			onabort:鼠标焦点事件 -->
	<form action="注册成功.html" onsubmit="return cheekAll()">
		<div>
			<label>
				账号:<input id="name" type="text" onkeyup="checkName()" />
				<span style="color: red;" id="sname"></span>
			</label>
		</div>
		<div>
			<label>
				密码:<input id="pwd" type="password" onkeyup="checkPwd()" />
				<span style="color: red;" id="spwd"></span>
			</label>
		</div>
		<button type="submit">注册</button>
		<button type="reset">清空/重置</button>
	</form>
	</body>
	<script type="text/javascript">
		function $(id) {
			//通过id获取组件并且返回 
			return document.getElementById(id);
		}

		//正则表达式验证
		//1.账号验证:只能由数字和大小写的英文字母及下划线组成,并且长度在6-10
		function checkName() {
			//获取账号
			var name = $("name").value;
			var reg = /^\w{6,10}$/;
			if (!reg.test(name)) {
				$("sname").innerHTML = "账号不符合规则";
				return false;
			} else {
				//清空span内容
				$("sname").innerHTML = "";
				return true;
			}
		}

		//1.密码验证:只能由数字组成,并且长度为6
		function checkPwd() {
			//获取密码
			var pwd = $("pwd").value;
			var reg = /^\d{6}$/;
			if (!reg.test(pwd)) {
				$("spwd").innerHTML = "密码不符合规则";
				return false;
			} else { //输入正确
				//清空span内容
				$("spwd").innerHTML = "";
				return true;
			}
		}

		//3.总方法
		function cheekAll() {
			//调用验证组件的方法
			if (!checkName() || !cheekAll()) {
				return false;
			} else {
				return true;
			}
		}
	</script>

你可能感兴趣的:(javascript,前端,java)