第3题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度注册页面</title> <style> * { 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="images/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> </dt> <dd><input name="sub" type="submit" value="注册" class="btn"/> <input name="cancel" type="reset" value="清除" class="btn"/></dd> </dl> </form> </div> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { $("#user").blur(uservalid); $("#pwd").blur(pwdvalid) $("#repwd").blur(repwdvalid) $("#email").focus(sexvalid) $("#email").blur(mailvalid) $("#myform").submit(function () { var flag = true; if (!uservalid()){ flag = false;} if (!pwdvalid()){ flag = false;} if (!repwdvalid()) {flag = false;} if (!sexvalid()) {flag = false;} if (!mailvalid()) {flag = false;} return flag; }) }) // 验证用户名 function uservalid() { var user = $("#user").val(); if (user == "") { $("#userId").html("用户名不能为空") return false } else if (user.length < 4 || user.length > 12) { $("#userId").html("用户名长度为4-12个字符") return false } else { for (var i = 0; i < user.length; i++) { var char = user.substring(i, i + 1) if (!(char >= '0' && char <= '9') && !(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char == '_')) { $("#userId").html("用户名必须由字母,数字和下划线组成") return false } else { $("#userId").html("") } } } return true } // 验证密码 function pwdvalid() { var pwd = $("#pwd").val(); if (pwd == "") { $("#pwdId").html("密码不能为空") return false } else if (pwd.length < 6 || pwd.length > 12) { $("#pwdId").html("密码长度为6-12个字符") return false } else { $("#pwdId").html("") } return true } // 验证重复密码 function repwdvalid() { var pwd = $("#pwd").val(); var repwd = $("#repwd").val(); if (pwd != repwd) { $("#repwdId").html("两次输入的密码不一致") return false } else { $("#repwdId").html("") } return true } // 验证性别 $("#myform :radio").focus(function () { $("#sexId").html("") }) function sexvalid() { var sex = $("#myform :checked").val() if (sex != "男" && sex != "女") { $("#sexId").html("请选择性别") return false } else { $("#sexId").html("") } return true } //验证邮箱 function mailvalid() { var mail = $("#email").val() if (mail == "") { $("#emailId").html("邮箱地址不能为空") return false } else if (mail.indexOf("@") == -1 || mail.indexOf(".") == -1) { $("#emailId").html("邮箱格式不正确") return false } else { $("#emailId").html("") } return true } </script> </body> </html>
第4题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用正则表达式验证表单内容</title> <style> * { 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="images/logo1.jpg" alt="logo"/> <form action="http://www.baidu.com" id="myform" method="post"> <dl> <dt>用户名:</dt> <dd><input id="user" type="text" class="inputs" οnblur="checkUser()"/> <div id="user_prompt"></div> </dd> </dl> <dl> <dt>Email地址:</dt> <dd><input id="email" type="text" class="inputs" οnblur="checkEmail()"/> <div id="email_prompt"></div> </dd> </dl> <dl> <dt>手机号码:</dt> <dd><input id="mobile" type="text" class="inputs" οnblur="checkMobile()"/> <div id="mobile_prompt"></div> </dd> </dl> <dl> <dt>登录密码:</dt> <dd><input id="pwd" type="password" class="inputs" οnblur="checkPwd()"/> <div id="pwd_prompt"></div> </dd> </dl> <dl> <dt>密码确认:</dt> <dd><input id="repwd" type="password" class="inputs" οnblur="checkRepwd()"/> <div id="repwd_prompt"></div> </dd> </dl> <dl> <dt> </dt> <dd><input name="" type="image" src="images/login.jpg"/></dd> </dl> </form> </div> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { $("#myform").submit(function () { var flag = true; if (!checkUser()) { flag = false; } if (!checkPwd()) { flag = false; } if (!checkEmail()) { flag = false; } if (!checkMobile()) { flag = false; } if (!checkRepwd()) { flag = false; } return flag; }) }) // 验证用户名 function checkUser() { var uPattern = /^[a-zA-Z]\w{4,15}$/; var user = $("#user").val(); if (user == "") { $("#user_prompt").html("用户名不能为空") return false } else if (user.length < 5 || user.length > 16) { $("#user_prompt").html("用户名长度为5-16个字符") return false } else if (uPattern.test(user) == false) { $("#user_prompt").html("首位为字母的5-16个字母,数字,下划线") return false } else { $("#user_prompt").html("") }return true } //验证手机号码 function checkMobile() { var mPattern = /^[1]\d{10}$/; var mobile = $("#mobile").val() if (mPattern.test(mobile)==false){ $("#mobile_prompt").html("手机号码不符合要求") }else { $("#user_prompt").html("") } } // 验证密码 function checkPwd() { var pPattern=/^.*(?=.{4,10})(?=.*\d)(?=.*[A-Za-z]).*$/; var pwd = $("#pwd").val(); if (pwd == "") { $("#pwd_prompt").html("密码不能为空") return false } else if (pwd.length < 4 || pwd.length > 10) { $("#pwd_prompt").html("密码长度为4-10个字符") return false }else if (pPattern.test(pwd)==false) { $("#pwd_prompt").html("密码包含字母和数字") return false } else { $("#pwd_prompt").html("") } return true } // 验证重复密码 function checkRepwd() { var pwd = $("#pwd").val(); var repwd = $("#repwd").val(); if (pwd != repwd) { $("#repwd_prompt").html("两次输入的密码不一致") return false } else { $("#repwd_prompt").html("") } return true } //验证邮箱 function checkEmail() { var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var mail = $("#email").val() if (mail == "") { $("#email_prompt").html("邮箱地址不能为空") return false } else if (ePattern.test(mail)==false) { $("#email_prompt").html("Email格式不正确,例如:web@sohu.com") return false } else { $("#email_prompt").html("") } return true } </script> </body> </html>
第5题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作注册验证</title> <style> *{ 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="images/top1.jpg" alt="top"/> <form action="" method="post" id="myform"> <dl> <dt class="left">用户名:</dt> <dd><input id="user" type="text" class="inputs" οnblur="checkUser()" οnfοcus="showUser()" /><div id="user_prompt" class="prompt"></div></dd> </dl> <dl> <dt class="left">密码:</dt> <dd><input id="pwd" type="password" class="inputs" οnblur="checkPwd()" οnfοcus="showPwd()" /> <div id="pwd_prompt" class="prompt"></div></dd> </dl> <dl> <dt class="left"> </dt> <dd><input name="" type="image" src="images/sumbit_btn.jpg" /></dd> </dl> </form> </div> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script> $(function () { $("#myform").submit(function () { var flag = true; if (!checkUser()) { flag = false; } if (!checkPwd()) { flag = false; } return flag }) }) function showUser(){ $("#user_prompt").html("首位为字母的4-16个字母,数字,下划线") } function showPwd(){ $("#pwd_prompt").html("4-10个字母和下划线") } function checkUser() { var uPattern = /^[a-zA-Z]\w{3,15}$/; var user = $("#user").val(); if (uPattern.test(user) == false) { $("#user_prompt").html("用户名不正确") return false } else { $("#user_prompt").html("") }return true } function checkPwd(){ var pPattern=/^[a-zA-Z_]{4,10}$/; var pwd = $("#pwd").val(); if (pPattern.test(pwd)==false) { $("#pwd_prompt").html("密码不正确") return false } else { $("#pwd_prompt").html("") } return true } </script> </body> </html>