JQuery实现表单验证

最新推荐文章于 2024-03-14 07:00:00 发布

你好啊cbw

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量582

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_40454863/article/details/114441253

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用属性选择器来选中具体元素

使用val()/html()给元素添加内容

给每个表单项绑定离焦事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script>
			function isUserName() {
				var val = $("input[name='userName']").val();/*获取元素文本内容*/
				if(val == "") {
					$("span[id='userNameMsg']").html("用户名不能为 空！").css("color", "red");
					return false;
				} else if(/^[a-zA-z]\w{5,}/.test(val) == false) {
					$("span[id='userNameMsg']").html("用户名不合 法！").css("color", "red");
					return false;
				}
				$("span[id='userNameMsg']").html("用户名可 用！").css("color", "green");
				return true;
			}

			function isPwd() {
				var val = $("input[name='pwd1']").val();
				if(val == "") {
					$("span[id='pwd1Msg']").html("密码不能为 空！").css("color", "red");
					return false;
				} else if(val.length < 8) {
					$("span[id='pwd1Msg']").html("密码长度不合 法！").css("color", "red");
					return false;
				}
				$("span[id='pwd1Msg']").html("密码格式正 确！").css("color", "green");
				return true;
			}

			function isPwd2() {
				if($("input[name='pwd1']").val() != $("input[name='pwd2']").val()) {
					$("span[id='pwd2Msg']").html("两次密码不一 致！").css("color", "red");
					return false;
				}
				$("span[id='pwd2Msg']").html("OK！").css("color", "green");
				return true;
			} /*校验电话码格式-座机或者手机 */
			function isTelCode(str) {
				var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
				if(reg.test(str)) {
					$("span[id='phoneMsg']").html("OK！").css("color", "green");
					return true;
				}
				$("span[id='phoneMsg']").html("电话格式不合 法！").css("color", "red");
				return false;
			} /*校验邮件地址是否合法 */
			function IsEmail(str) {
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				if(reg.test(str)) {
					$("span[id='emailMsg']").html("OK！").css("color", "green");
					return true;
				}
				$("span[id='emailMsg']").html("邮箱地址不合 法！").css("color", "red");
				return false;
			} /*校验是否选择了性别*/
			function isGender() {
				var val = $("select[name='gender']").val();
				if(val == -1) {
					alert("请选择性别！");
					return false;
				}
				return true;
			} 
			//页面加载事件 
			$(function(){ 
				$("input[name='userName']").blur(function(){ 
					isUserName();
				}); 
				$("input[name='pwd1']").blur(function(){ 
					isPwd(); 
				}); 
				$("input[name='pwd2']").blur(function(){ 
					isPwd2();
				});
				$("input[name='phone']").blur(function() {
					isTelCode();
				});
				$("input[name='email']").blur(function() {
					IsEmail();
				});
				$("#myForm").submit(function() {
					return isUserName() && isPwd() && isPwd2() && isGender() && isTelCode() && IsEmail();
				});
			});
		</script>
	</head>

	<body>
	<h1>注册</h1>
	<form id="myForm" action="提交.html" method="get"> 
		*用户名:<input type="text" name="userName" placeholder="请输入用户名" />
			   <span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必 须以字母开头</span><br />
		*密码： <input type="password"  name="pwd1" placeholder="请输入密码" required/> 
			  <span id="pwd1Msg">密码长度至少8位</span><br /> 
		*确认密码：
		         <input type="password" name="pwd2" placeholder="请确认密码" required/> 
				 <span id="pwd2Msg">确认密码与密码一致</span><br /> *性别：
		<select id="gender">
			<option value="-1">请选择性别</option>
			<option value="0">女</option>
			<option value="1">男</option>
		</select><br /> 
		*电话号码：<input name="phone" required/>
				<span id="phoneMsg"></span> <br /> 
		*邮箱：<input name="email" type="email" required/>
				<span id="emailMsg"></span><br /> 
		<button type="submit">注册</button> 
		<button type="reset">重置</button> 
	</form>
</body>

</html>

你好啊cbw

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现表单验证

使用属性选择器来选中具体元素使用val()/html()给元素添加内容给每个表单项绑定离焦事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> &lt
复制链接

扫一扫