javascript综合小案例,校验用户注册信息提交
完成这个综合小案例,对于html、css、javascript的大部分内容复习快结束了。
这里做一个小案例——要实现的功能,以一张图片的形式给出:
首先,写出提交数据之后进入的页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <h1><font color="#FF0000">恭喜你 ,提交数据成功</font></h1> </body> </html>
接着编写主程序:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> //检查用户名 function checkName(){ var inputNode = document.getElementById("userName"); var spanNode = document.getElementById("userId"); //获取输入框的内容 var content = inputNode.value;//注意:可以根据value属性值,来获取前台输入的内容。 //用户名的规则: 六位的英文与数字组成。数字不能开头 var reg = /^[a-z][a-z0-9]{5}$/i; if(reg.test(content)){ //符合规则 spanNode.innerHTML = "正确".fontcolor("green"); return true; }else{ //不符合规则 spanNode.innerHTML = "错误".fontcolor("red"); return false; } } //检查邮箱 function checkEmail(){ var email = document.getElementById("email").value; var spanNode = document.getElementById("emailspan"); //编写邮箱的正则 13456@qq.com 13456@qq.net 13456@qq.com.cn var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; if(reg.test(email)){ //符合规则 spanNode.innerHTML = "正确".fontcolor("green"); return true; }else{ //不符合规则 spanNode.innerHTML = "错误".fontcolor("red"); return false; } } function checkAll(){ var userName = checkName(); var email = checkEmail(); if(userName&&email){ return true; }else{ return false; } } /* 表单提交的时候是会触发onsubmit事件的,如果onsubmit事件的方法返回是true,那么该表单允许提交,如果返回的是false,该表单不允许提交。 */ </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>正则表达式</title> </head> <body> <form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交,如果返回的是true允许提交 --> <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px"> <tr> <td width="25%">姓名:</td> <td> <input type="text" name="userName" id="userName" onblur="checkName()"/> <span id="userId"></span> </td> </tr> <tr> <td >密码:</td><td> <input type="password" name="pwd" id="pwd" onblur="checkPass()"/> <span id="passId"></span> </td> </tr> <tr> <td>确认密码:</td><td> <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span> </td> </tr> <tr> <td>邮箱</td><td> <input type="text" name="email" id="email" onblur="checkEmail()"/> <span id="emailspan"></span> </td> </tr> <tr> <td>性别</td><td> <input type="radio" checked="ture" name="gender" id="male" value="male"/> 男 <input type="radio" name="gender" value="female"/> 女</td> </tr> <tr> <td>爱好:</td><td> <input type="checkbox" name="like" /> eat <input type="checkbox" name="like" /> sleep <input type="checkbox" name="like"/> play <span id="hobbySpan"></span> </td> </tr> <tr> <td>城市</td><td> <select name="city" id="city"> <option value=""> 请选择</option> <option value="bj"> 北京 </option> <option value="gz"> 广州 </option> <option value="sh"> 上海 </option> </select> </td> </tr> <tr> <td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td> </tr> <tr align="center"> <td colspan="2"><!--提交按钮--> <input type="submit"/> </td> </tr> </table> </form> </body> </html>