JavaScript 第九章作业

程序员文章站 2022-06-15 13:47:48

...

1.简单描述使用正则表达式验证表单内容的优点

（1）验证代码简洁
（2）能实现复杂的验证，并且验证结果准确
（3）类似于邮箱、年龄等常用的正则表达式都有成熟完善的写法，能减少开发的工作量

2.(“input”)和(":input")有什么区别

$("input")是获取页面中所有input 元素。
$(":input")是获取所有input、textarea、select和button 元素

3.制作百度注册页面，使用jQuery验证用户名，密码等表单数据的有效性
实现代码如下:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>百度注册页面</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				font-size: 12px;
				line-height: 25px;
			}
			
			.register {
				float: none;
				width: 503px;
				clear: both;
				margin: 0px auto;
			}
			
			.register dl {
				clear: both;
			}
			
			.register dt {
				width: 120px;
				text-align: right;
				padding-right: 5px;
				float: left;
			}
			
			.inputs {
				border: 1px solid #333;
				width: 120px;
				height: 20px;
				;
			}
			
			.register dl dd div {
				color: #ff0000;
				padding-left: 5px;
				display: inline;
			}
			
			.btn {
				width: 60px;
				text-align: center;
				height: 26px;
				margin: 5px 5px 0 0;
			}
		</style>
	</head>

	<body>
		<div class="register">
			<div class="center"><img src="img/header1.jpg" /></div>
			<form action="success.html" method="post" id="myform">
				<dl>
					<dt>用户名：</dt>
					<dd><input id="user" type="text" class="inputs" />
						<div id="userId"></div>
					</dd>
				</dl>
				<dl>
					<dt>密码：</dt>
					<dd><input id="pwd" type="password" class="inputs" />
						<div id="pwdId"></div>
					</dd>
				</dl>
				<dl>
					<dt>确认密码：</dt>
					<dd><input id="repwd" type="password" class="inputs" />
						<div id="repwdId"></div>
					</dd>
				</dl>
				<dl>
					<dt>性别：</dt>
					<dd><input name="sex" type="radio" value="男" />男 <input name="sex" type="radio" value="女" />女
						<div id="sexId"></div>
					</dd>
				</dl>
				<dl>
					<dt>电子邮件：</dt>
					<dd><input id="email" type="text" class="inputs" />
						<div id="emailId"></div>
					</dd>
				</dl>
				<dl>
					<dt>出生日期：</dt>
					<dd>
						<select id="year">
							<script>
								for(var i = 1900; i <= 2015; i++) {
									document.write("<option value=" + i + ">" + i + "</option>");
								}
							</script>
						</select>年
						<select id="month">
							<script>
								for(var i = 1; i <= 12; i++) {
									document.write("<option value=" + i + ">" + i + "</option>");
								}
							</script>
						</select>月
						<select id="day">
							<script>
								for(var i = 1; i <= 31; i++) {
									document.write("<option value=" + i + ">" + i + "</option>");
								}
							</script>
						</select>日</dd>
				</dl>
				<dl>
					<dt>&nbsp;</dt>
					<dd><input name="sub" type="submit" value="注册" class="btn" /> <input name="cancel" type="reset" value="清除" class="btn" /></dd>
				</dl>
			</form>
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//表单提交进行验证
				$("#myform").submit(function() {
					var flag = true;
					if(!userName()) flag = false;
					if(!passPwd()) flag = false;
					if(!repassPwd()) flag = false;
					if(!sex()) flag = false;
					if(!email()) flag = false;
					return flag;
				})

				//绑定失去焦点事件
				$("#user").blur(userName);
				$("#pwd").blur(passPwd);
				$("#repwd").blur(repassPwd);
				$("#email").blur(email);

				//验证用户名
				function userName() {
					var user = $("#user").val();
					var userId = $("#userId");
					var reg = /\d+[a-zA-Z_]+|[a-zA-Z_]+\d+/;
					if(user == "") {
						userId.html("用户名不能为空");
						return false;
					}
					if(user.length < 4 || user.length > 12) {
						userId.html("用户名长度为在4―12字符");
						return false;
					}
					if(!reg.test(user)) {
						userId.html("用户名必须由字母数字下划线组成");
						return false;
					}
					userId.html("");
					return true;
				}

				//验证密码
				function passPwd() {
					var pwd = $("#pwd").val();
					var pwdId = $("#pwdId");
					if(pwd == "") {
						pwdId.html("密码不能为空");
						return false;
					}
					if(pwd.length < 6 || pwd.length > 12) {
						pwdId.html("密码长度为在6―12字符");
						return false;
					}
					pwdId.html("");
					return true;
				}
				//验证两次密码是否一致
				function repassPwd() {
					var repwd = $("#repwd").val();
					var pwd = $("#pwd").val();
					var repwdId = $("#repwdId");
					if(pwd != repwd) {
						repwdId.html("两次输入的密码不一致");
						return false;
					}
					repwdId.html("");
					return true;
				}
				//验证性别是否被选中
				function sex() {
					var sexId = $("#sexId");
					var j = 0;
					var sex = document.getElementsByName("sex");
					for(var i = 0; i < sex.length; i++) {
						if(sex[i].checked == true) {
							j = 1;
							break;
						}
					}
					if(j == 0) {
						sexId.html("请选择性别");
						return false;
					}
					sexId.html("");
					return true;
				}
				//验证邮箱
				function email() {
					var mail = $("#email").val();
					var emailId = $("#emailId");
					if(mail == "") { //检测Email是否为空
						emailId.html("电子邮件地址不能为空");
						return false;
					}
					if(mail.indexOf("@") == -1) {
						emailId.html("电子邮件地址格式不正确\n必须包含@");
						return false;
					}
					if(mail.indexOf(".") == -1) {
						emailId.html("电子邮件地址格式不正确\n必须包含.");
						return false;
					}
					emailId.html("");
					return true;
				}

			})
		</script>
	</body>

</html>

4.使用正则表达式验证表单注册页面
实现代码如下:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>使用正则表达式验证表单内容</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 14px;
				line-height: 20px;
			}
			
			.main {
				width: 900px;
				margin: 0 auto;
			}
			
			.main dl {
				clear: both;
				height: 30px;
			}
			
			.main dl dt {
				text-align: right;
				float: left;
				width: 180px;
				height: 25px;
				padding-right: 5px;
			}
			
			.inputs {
				width: 130px;
				height: 16px;
				border: solid 1px #666666;
				float: left;
				margin-right: 5px;
			}
			
			.main dl dd div {
				display: inline;
				margin-left: 10px;
				color: #F00;
			}
		</style>
	</head>

	<body>
		<div class="main"><img src="img/logo.jpg" alt="logo" />
			<form action="success.html" id="myform" method="post">
				<dl>
					<dt>用户名：</dt>
					<dd><input id="user" type="text" class="inputs" onblur="checkUser()" />
						<div id="user_prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt>Email地址：</dt>
					<dd><input id="email" type="text" class="inputs" onblur="checkEmail()" />
						<div id="email_prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt>手机号码：</dt>
					<dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()" />
						<div id="mobile_prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt>登录密码：</dt>
					<dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()" />
						<div id="pwd_prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt>密码确认：</dt>
					<dd><input id="repwd" type="password" class="inputs" onblur="checkRepwd()" />
						<div id="repwd_prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt>&nbsp;</dt>
					<dd><input name="" type="image" src="img/login.jpg" /></dd>
				</dl>
			</form>
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//表单提交验证
				$("#myform").submit(function() {
					var flag = true;
					if(!checkUser()) flag = false;
					if(!checkEmail()) flag = false;
					if(!checkMobile()) flag = false;
					if(!checkPwd()) flag = false;
					if(!checkRepwd()) flag = false;
					return flag;
				})
				//绑定失去焦点事件
				$("#user").blur(checkUser);
				$("#email").blur(checkEmail);
				$("#mobile").blur(checkMobile);
				$("#pwd").blur(checkPwd);
				$("#repwd").blur(checkRepwd);
				//用户名验证
				function checkUser() {
					var user = $("#user").val();
					var userId = $("#user_prompt");
					userId.html("");
					var reg = /^[a-zA-Z][\w_]{4,15}$/;
					if(user == "") {
						userId.html("用户名不能为空");
						return false;
					}
					if(user.length < 4 || user.length > 12) {
						userId.html("用户名长度为4~12个字符");
						return false;
					}
					if(!reg.test(user)) {
						userId.html("用户名不正确");
						return false;
					}
					return true;
				}
				//邮箱验证
				function checkEmail() {
					var email = $("#email").val();
					var emailId = $("#email_prompt");
					emailId.html("");
					var reg = /^\[email protected]\w+(\.[a-zA-Z]{2,3}){1,2}$/;
					if(email == "") {
						emailId.html("邮箱不能为空");
						return false;
					}
					if(!reg.test(email)) {
						emailId.html("邮箱格式不正确，例如[email protected]");
						return false;
					}
					return true;
				}
				//验证手机号码
				function checkMobile() {
					var mobile = $("#mobile").val();
					var mobileId = $("#mobile_prompt");
					var regMobile = /^1\d{10}$/;
					mobileId.html("");
					if(mobile == "") {
						mobileId.html("手机号码不能为空");
						return false;
					}
					if(!regMobile.test(mobile)) {
						mobileId.html("手机号码格式不正确，请输入以1开头的十一位整数");
						return false;
					}
					return true;
				}
				//验证登入密码
				function checkPwd() {
					var pwd = $("#pwd").val();
					var pwdId = $("#pwd_prompt");
					var reg = /^[a-zA-Z0-9]{4,10}$/;
					pwdId.html("");
					if(pwd == "") {
						pwdId.html("密码不能为空");
						return false;
					}
					if(!reg.test(pwd)) {
						pwdId.html("密码不能含有非法字符,长度在4~10位之间");
						return false;
					}
					return true;
				}
				//验证两次密码是否一致
				function checkRepwd() {
					var repwd = $("#repwd").val();
					var pwd = $("#pwd").val();
					var repwdId = $("#repwd_prompt");
					repwdId.html("");
					if(repwd == "") {
						repwdId.html("两次输入的密码不一致");
						return false;
					}
					if(pwd != repwd) {
						repwdId.html("两次输入的密码不一致");
						return false;
					}
					return true;
				}
			})
		</script>
	</body>

</html>

5.使用正则表达式制作注册页面提示特效
实现代码如下:

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>制作注册验证</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 25px;
			}
			
			.main {
				width: 470px;
				margin: 0 auto;
			}
			
			.main dl {
				clear: both;
				height: 30px;
			}
			
			.main dl dt {
				text-align: right;
				float: left;
				width: 100px;
				height: 25px;
				padding-right: 5px;
			}
			
			.inputs {
				width: 100px;
				height: 16px;
				border: solid 1px #666666;
				float: left;
				margin-right: 5px;
			}
			
			.main dl dd div {
				display: inline;
				margin-left: 10px;
				color: #F00;
			}
		</style>
	</head>

	<body>
		<div class="main"><img src="img/head.jpg" alt="top" />
			<form action="success.html" method="post" id="myform">
				<dl>
					<dt class="left">用户名：</dt>
					<dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" />
						<div id="user_prompt" class="prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt class="left">密码：</dt>
					<dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()" onfocus="showPwd()" />
						<div id="pwd_prompt" class="prompt"></div>
					</dd>
				</dl>
				<dl>
					<dt class="left">&nbsp;</dt>
					<dd><input name="" type="image" src="img/sumbit_btn.jpg" width="25%" style="outline: none;" /></dd>
				</dl>
			</form>
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//表单提交验证
				$("#myform").submit(function() {
					var flag = true;
					if(!checkUser()) flag = false;
					if(!checkPwd()) flag = false;
					return flag;
				})
				//绑定失去焦点事件
				$("#user").blur(checkUser);
				$("#pwd").blur(checkPwd);
				//确定获取焦点事件
				$("#user").focus(showUser);
				$("#pwd").focus(showPwd);
				//用户名验证
				function checkUser() {
					var user = $("#user").val();
					var userId = $("#user_prompt");
					userId.html("");
					var reg = /^[a-zA-Z][\w_]{4,15}$/;
					if(user == "") {
						userId.html("用户名不能为空");
						return false;
					}
					if(!reg.test(user)) {
						userId.html("用户名不正确");
						return false;
					}
					return true;
				}
				//密码验证
				function checkPwd() {
					var pwd = $("#pwd").val();
					var pwdId = $("#pwd_prompt");
					pwdId.html("");
					var reg = /^[a-zA-Z0-9]{4,10}$/;
					if(pwd == "") {
						pwdId.html("密码不能为空");
						return false;
					}
					if(!reg.test(pwd)) {
						pwdId.html("密码输入不正确");
						return false;
					}
					return true;
				}
				//用户名输入提示
				function showUser() {
					var userId = $("#user_prompt");
					userId.html("首位为字母的 4~16个数字、字母、下线划");
				}
				//密码输入提示
				function showPwd() {
					var pwdId = $("#pwd_prompt");
					pwdId.html("4~10个字母和下划线");
				}
			})
		</script>
	</body>

</html>

JavaScript 第九章作业

实例讲解JavaScript截取字符串

COM组件中调用JavaScript函数详解及实例

javascript 操作cookies详解及实例

JavaScript实现二分查找实例代码

简介JavaScript中的setTime()方法的使用

JavaScript实现简单轮播图效果

javascript 网页进度条简单实例

Javascript数组方法reduce的妙用之处分享

在JavaScript中操作时间之setYear()方法的使用

JavaScript中的setUTCDate()方法使用详解

JavaScript 第九章 作业

实例讲解JavaScript截取字符串

COM组件中调用JavaScript函数详解及实例

javascript 操作cookies详解及实例

JavaScript实现二分查找实例代码

简介JavaScript中的setTime()方法的使用

JavaScript实现简单轮播图效果

javascript 网页进度条简单实例

Javascript数组方法reduce的妙用之处分享

在JavaScript中操作时间之setYear()方法的使用

JavaScript中的setUTCDate()方法使用详解

JavaScript 第九章作业