html5jquery练习

最新推荐文章于 2024-05-08 18:28:38 发布

AUTO_K

最新推荐文章于 2024-05-08 18:28:38 发布

阅读量356

点赞数

分类专栏：练习题文章标签： html js

本文链接：https://blog.csdn.net/weixin_44722237/article/details/117717415

版权

练习题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html5用jquery验证注册信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册界面</title>
		<style>
			#jz {
				margin: 0 auto;
				width: 600px;
				height: 400px;
				border: 2px solid rosybrown
			}
		</style>	
	</head>
	<body>
		<div id="jz" style="background-image: url(img/a.JPG);">
			<h1 style="text-align: center; color: rgb(21,112,12) ;">csdn会注册</h1>
			<form id="myForm" action="提交.html" method="get">
				<label>*用户名:</label><input type="text" name="userName" placeholder="请输入用户名" >
				<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br>
				<label>*密码：</label><input type="password" name="pwd1" placeholder="请输入密码" required="">
				<span id="pwd1Msg">密码长度至少8位</span><br>
				<label>*确认密码：</label> <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>
				<label>*电话号码：</label><input name="phone" required=""/>
				<span id="phoneMsg"></span><br>
				<label>*邮箱：</label><input name="email" type="email" required="" />
				<span id="emailMsg"></span><br>
				<div style="background-color: #BC8F8F; width:40%;height: 40px;text-align:center ;margin:0 auto;">
					<button type="submit">注册</button>
					
					<button type="reset">重置</button>
				</div>

			</form>
		</div>
	</body>
</html>
	<script type="text/javascript" src="js/jquery-1.11.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() {
				var str= $("input[name='phone']").val();
			var  reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
			if(reg.test(str)==true) {
				$("span[id='phoneMsg']").html("OK！").css("color", "green");
						return true;
				}
			$("span[id='phoneMsg']").html("电话格式不合 法！ ").css(" color "," red ");
			return false;
			}
		/*校验邮件地址是否合法 */
			function IsEmail() {
				var str= $("input[name='email']").val();
			var  reg =/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
//			var reg=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/
			if(reg.test(str)==true){
			$("span[id='emailMsg']").html("OK！").css("color","green");
			return true;
			}else{
				$("span[id='emailMsg']").html("邮箱地址不合 法！").css("color","red");
			return false;
				}
			}

			/*校验是否选择了性别*/
			function isGender() {
			var val = $("select[id='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>

运行效果图：

AUTO_K

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5jquery练习

html5用jquery验证注册信息<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册界面</title> <style> #jz { margin: 0 auto; width: 600px; height: 400px; border: 2px solid rosybrown }
复制链接

扫一扫