<!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> //用户名的规则： 第一位是字母，只有由数字与字母 组成，6位。 function checkName(){ //获取到了用户名的值 var userName = document.getElementById("username").value; var userSpan = document.getElementById("userId"); var reg = /^[a-z][a-z0-9]{5}$/i; if(reg.test(userName)){ //符合规则 userSpan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 userSpan.innerHTML="错误".fontcolor("red"); return false; } } //校验密码 6位 function checkPass(){ var password = document.getElementById("pwd").value; if(password.length>0){ var reg = /^w{6}$/; var passSPan = document.getElementById("passId"); if(reg.test(password)){ //符合规则 passSPan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 passSPan.innerHTML="错误".fontcolor("red"); return false; } } } //检验密码是否正确 function ensurepass(){ var password1 = document.getElementById("pwd").value; //第一次 输入的密码 var password2 = document.getElementById("ensurepwd").value; if(password2.length>0){ var enSpan = document.getElementById("ensure"); if(password1.valueOf()==password2.valueOf()){ enSpan.innerHTML="正确".fontcolor("green"); return true; }else{ enSpan.innerHTML="错误".fontcolor("red"); return false; } } } //校验邮箱 function checkEmail(){ var email = document.getElementById("email").value; var reg = /^[a-z0-9]w+@[a-z0-9]{2,3}(.[a-z]{2,3}){1,2}$/i; // .com .com.cn var emailspan = document.getElementById("emailspan"); alert(reg.test(email)); if(reg.test(email)){ //符合规则 emailspan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 emailspan.innerHTML="错误".fontcolor("red"); return false; } } //校验兴趣爱好： 至少要算中其中 的 一个。 function checkHoby(){ var likes = document.getElementsByName("like"); var hobySpan =document.getElementById("hobbySpan") var flag = false; for(var i = 0 ; i<likes.length ; i++){ if(likes[i].checked){ flag =true; break; } } if(flag){ //符合规则 hobySpan.innerHTML="正确".fontcolor("green"); return true; }else{ //不符合规则 hobySpan.innerHTML="错误".fontcolor("red"); return false; } } //总体校验表单是否可以提交了 如果返回的true表单才可以提交。 上面的表单项必须要每个都填写正确。 function checkForm(){ var userName = checkName(); var pass = checkPass(); var ensure = ensurepass(); var email = checkEmail(); var hoby = checkHoby(); if(userName&&pass&&ensure&&email&&hoby){ return true; }else{ return 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 checkForm()"> <!--如果表单提交时候触发的方法返回是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" checked="checked" 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>