javascript表单验证代码 花了两天时间自己写了一个表单验证的JS代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form check!</title> <mce:style type="text/css"><!-- body{background:#60c0a0; font-size:small; text-align:center;} #wrap{margin:50px auto; text-align:left; width:900px;} .listName{text-align:right; width:120px;} .inputStyle input{background:#ddd; border:1px solid #330000; padding:2px; width:180px;} .explain{font-size:85%;} .errorMsg{color:#CC0033;} .rightMsg{color:#FF9966;} .sumAndrest{text-align:center;} .btn{background:#FFF; border:1px solid gray; cursor:hand; color:dimgray; font-size:60%; padding-top:3px; margin:0 10px;} --></mce:style><style type="text/css" mce_bogus="1"> body{background:#60c0a0; font-size:small; text-align:center;} #wrap{margin:50px auto; text-align:left; width:900px;} .listName{text-align:right; width:120px;} .inputStyle input{background:#ddd; border:1px solid #330000; padding:2px; width:180px;} .explain{font-size:85%;} .errorMsg{color:#CC0033;} .rightMsg{color:#FF9966;} .sumAndrest{text-align:center;} .btn{background:#FFF; border:1px solid gray; cursor:hand; color:dimgray; font-size:60%; padding-top:3px; margin:0 10px;}</style> <mce:script type="text/javascript"><!-- var isUser=false; var isPass=false; var isRePass=false; var isChoose=false; var isMail=false; var isVocation=false; var isHobby=false; var strok="<span class='rightMsg'>OK!</span>"; function getId(did) { return document.getElementById(did); } //检测用户名 function checkUser() { var user=document.visForm.user.value; var pattern=/[a-zA-Z]/; if (user.length >=4 && user.length <=20) { if (user.match(//W/g) != null) { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名含有无效字符。</span>"; return false; } else { if (pattern.test(user) == true) { getId("userExplain").innerHTML=strok; isUser=true; return true; } else { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名不能全是数字。</span>"; return false; } } } else { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名长度不在有效范围内(4-20个字符)。</span>"; return false; } } //检测密码 function checkPass() { var pass=document.visForm.pass.value; if (pass.length >=6 && pass.length <= 16) { if (pass.match(//s/g) != null ) { getId("passExplain").innerHTML="<span class='errorMsg'>您输入的密码含有空白字符。</span>"; return false; } else { getId("passExplain").innerHTML=strok; isPass=true; return true; } } else { getId("passExplain").innerHTML="<span class='errorMsg'>您输入的密码长度不在有效范围内(6-16个字符)。</span>"; return false; } } //检测两次密码是否相同 function checkRePass() { var pass=document.visForm.pass.value; var repass=document.visForm.repass.value; if (pass != repass) { getId("repassExplain").innerHTML="<span class='errorMsg'>您输入的两次密码不一致。</span>"; document.visForm.pass.focus(); return false; } else { getId("repassExplain").innerHTML=strok; isRePass=true; return true; } } //检测省份 function checkProvince() { var province=document.visForm.province.value; if (province=="no-choose"){ getId("provinceExplain").innerHTML="<span class='errorMsg'>您还没有选择所在省份呢!</span>"; document.visForm.province.focus(); return false; } else { getId("provinceExplain").innerHTML=strok; isChoose=true; return true; } } //检测职业 function checkVocation() { var vocation=document.visForm.vocation.value; var reg = /^[u4E00-u9FA5]+$/; //检查是否中文 if (vocation.length==0 || vocation.indexOf(" ") != -1 ) { getId("vocationExplain").innerHTML="<span class='errorMsg'>请正确输入您的职业。</span>"; return false; } else { if (!reg.test(vocation)) { getId("vocationExplain").innerHTML=strok; isVocation=true; return true; } getId("vocationExplain").innerHTML="<span class='errorMsg'>请正确输入您的职业。</span>"; return false; } } //检测邮箱 function checkMail() { var mail=document.visForm.mailbox.value; var partten=/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)/w+)*/.[A-Za-z0-9]+$/; if (partten.test(mail) == true) { getId("mailboxExplain").innerHTML=strok; isMail=true; return true; } else { getId("mailboxExplain").innerHTML="<span class='errorMsg'>您输入的不是有效的E-mail。</span>"; return false; } } //检测兴趣爱好 function checkHobby() { var hobbyLength=document.visForm.hobby.length; var j=0; for (var i=0; i<hobbyLength; i++) { if (visForm.hobby[i].checked) { ++j; } } if (j==0) { getId("hobbyExplain").innerHTML="<span class='errorMsg'>请选择1个或多个。</span>"; return false; } else { getId("hobbyExplain").innerHTML=strok; isHobby=true; return true; } } //重置表单 function resetForm() { isUser=false; isPass=false; isRePass=false; isChoose=false; isMail=false; isVocation=false; isHobby=false; //isCheckCode=false; getId("userExplain").innerHTML="由4-20个字符组成,可以是英文字母(区分大小写)、数字、下划线,但不能全是数字。"; getId("passExplain").innerHTML="由6-16个字符组成,可以是任意字符,但不能是空白字符。" getId("repassExplain").innerHTML=""; getId("mailboxExplain").innerHTML="输入必须符合邮件地址格式,如XX@XXX.XX。"; getId("vocationExplain").innerHTML="只能输入中文,比如:工人、教师、学生、农民、公务员、自由职业人等。"; getId("hobbyExplain").innerHTML="(至少选择一个。)"; getId("provinceExplain").innerHTML=""; } //提交前检测Form function checkForm() { if (isUser==true && isPass==true && isRePass==true && isChoose==true && isVocation==true && isHobby==true && isMail==true) { return true; } else { alert("信息没有填完整,请检查一下。"); return false; } } // --></mce:script> </head> <body> <div id="wrap"> <form method="post" action="submit.jsp" name="visForm" οnreset="resetForm()" οnsubmit="return checkForm()" /> <p class="inputStyle"> <!--加 是为了兼容FF,下同--> <span class="listName"> 用户名:</span> <input type="text" name="user" οnblur="return checkUser()" /> <span class="explain" id="userExplain">由4-20个字符组成,可以是英文字母(区分大小写)、数字、下划线,但不能全是数字。</span> </p> <p class="inputStyle"> <span class="listName">输入密码:</span> <input type="password" name="pass" οnblur="return checkPass()" /> <span class="explain" id="passExplain">由6-16个字符组成,可以是任意字符,但不能是空白字符。</span> </p> <p class="inputStyle"> <span class="listName">确认密码:</span> <input type="password" name="repass" οnblur="return checkRePass()" /> <span class="explain" id="repassExplain"></span> </p> <p> <span class="listName"> 性别:</span> <input type="radio" checked="true" name="sex" value="男" /> 男 <input type="radio" name="sex" values="女" /> 女 </p> <p><span class="listName">所在省份:</span> <select name="province" οnchange="return checkProvince()"> <option value="no-choose">请选择</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="浙江">浙江</option> <option value="福建">福建</option> <option value="山东">山东</option> <option value="陕西">陕西</option> <option value="湖南">湖南</option> <option value="河北">河北</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="海南">海南</option> <option value="江西">江西</option> </select> <span class="explain" id="provinceExplain"></span> </p> <p class="inputStyle"> <span class="listName">职业:</span> <input type="text" name="vocation" οnblur="return checkVocation()"/> <span class="explain" id="vocationExplain">只能输入中文,比如:工人、教师、学生、农民、公务员、自由职业人等。</span> </p> <p class="inputStyle"> <span class="listName"> E-mail:</span> <input type="text" name="mailbox" οnblur="return checkMail()" /> <span class="explain" id="mailboxExplain">输入必须符合邮件地址格式,如XX@XXX.XX。</span> </p> <p><span class="listName">兴趣爱好:</span> <input type="checkbox" name="hobby" value="运动" οnclick="return checkHobby()";>运动 <input type="checkbox" name="hobby" value="旅游" οnclick="return checkHobby()";>旅游 <input type="checkbox" name="hobby" value="读书" οnclick="return checkHobby()";>读书 <input type="checkbox" name="hobby" value="看电影" οnclick="return checkHobby()";>看电影 <input type="checkbox" name="hobby" value="玩游戏" οnclick="return checkHobby()";>玩游戏 <input type="checkbox" name="hobby" value="上网" οnclick="return checkHobby()";>上网 <input type="checkbox" name="hobby" value="听音乐" οnclick="return checkHobby()";>听音乐 <input type="checkbox" name="hobby" value="其他" οnclick="return checkHobby()";>其他 <span class="explain" id="hobbyExplain">(至少选择一个。)</span> </p> <!-- <p class="inputStyle"> <span class="listName"> 验证码:</span> <input type="text" name="checkcode" /> <span class="explain">请输入左边的字符。</span> </p> --> <p class="sumAndrest"> <button type="submit" class="btn">提交</button> <button type="reset" class="btn">重置</button> </p> </form> </div> </body> </html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form check!</title> <mce:style type="text/css"><!-- body{background:#60c0a0; font-size:small; text-align:center;} #wrap{margin:50px auto; text-align:left; width:900px;} .listName{text-align:right; width:120px;} .inputStyle input{background:#ddd; border:1px solid #330000; padding:2px; width:180px;} .explain{font-size:85%;} .errorMsg{color:#CC0033;} .rightMsg{color:#FF9966;} .sumAndrest{text-align:center;} .btn{background:#FFF; border:1px solid gray; cursor:hand; color:dimgray; font-size:60%; padding-top:3px; margin:0 10px;} --></mce:style><style type="text/css" mce_bogus="1"> body{background:#60c0a0; font-size:small; text-align:center;} #wrap{margin:50px auto; text-align:left; width:900px;} .listName{text-align:right; width:120px;} .inputStyle input{background:#ddd; border:1px solid #330000; padding:2px; width:180px;} .explain{font-size:85%;} .errorMsg{color:#CC0033;} .rightMsg{color:#FF9966;} .sumAndrest{text-align:center;} .btn{background:#FFF; border:1px solid gray; cursor:hand; color:dimgray; font-size:60%; padding-top:3px; margin:0 10px;}</style> <mce:script type="text/javascript"><!-- var isUser=false; var isPass=false; var isRePass=false; var isChoose=false; var isMail=false; var isVocation=false; var isHobby=false; var strok="<span class='rightMsg'>OK!</span>"; function getId(did) { return document.getElementById(did); } //检测用户名 function checkUser() { var user=document.visForm.user.value; var pattern=/[a-zA-Z]/; if (user.length >=4 && user.length <=20) { if (user.match(//W/g) != null) { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名含有无效字符。</span>"; return false; } else { if (pattern.test(user) == true) { getId("userExplain").innerHTML=strok; isUser=true; return true; } else { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名不能全是数字。</span>"; return false; } } } else { getId("userExplain").innerHTML="<span class='errorMsg'>您输入的用户名长度不在有效范围内(4-20个字符)。</span>"; return false; } } //检测密码 function checkPass() { var pass=document.visForm.pass.value; if (pass.length >=6 && pass.length <= 16) { if (pass.match(//s/g) != null ) { getId("passExplain").innerHTML="<span class='errorMsg'>您输入的密码含有空白字符。</span>"; return false; } else { getId("passExplain").innerHTML=strok; isPass=true; return true; } } else { getId("passExplain").innerHTML="<span class='errorMsg'>您输入的密码长度不在有效范围内(6-16个字符)。</span>"; return false; } } //检测两次密码是否相同 function checkRePass() { var pass=document.visForm.pass.value; var repass=document.visForm.repass.value; if (pass != repass) { getId("repassExplain").innerHTML="<span class='errorMsg'>您输入的两次密码不一致。</span>"; document.visForm.pass.focus(); return false; } else { getId("repassExplain").innerHTML=strok; isRePass=true; return true; } } //检测省份 function checkProvince() { var province=document.visForm.province.value; if (province=="no-choose"){ getId("provinceExplain").innerHTML="<span class='errorMsg'>您还没有选择所在省份呢!</span>"; document.visForm.province.focus(); return false; } else { getId("provinceExplain").innerHTML=strok; isChoose=true; return true; } } //检测职业 function checkVocation() { var vocation=document.visForm.vocation.value; var reg = /^[u4E00-u9FA5]+$/; //检查是否中文 if (vocation.length==0 || vocation.indexOf(" ") != -1 ) { getId("vocationExplain").innerHTML="<span class='errorMsg'>请正确输入您的职业。</span>"; return false; } else { if (!reg.test(vocation)) { getId("vocationExplain").innerHTML=strok; isVocation=true; return true; } getId("vocationExplain").innerHTML="<span class='errorMsg'>请正确输入您的职业。</span>"; return false; } } //检测邮箱 function checkMail() { var mail=document.visForm.mailbox.value; var partten=/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)/w+)*/.[A-Za-z0-9]+$/; if (partten.test(mail) == true) { getId("mailboxExplain").innerHTML=strok; isMail=true; return true; } else { getId("mailboxExplain").innerHTML="<span class='errorMsg'>您输入的不是有效的E-mail。</span>"; return false; } } //检测兴趣爱好 function checkHobby() { var hobbyLength=document.visForm.hobby.length; var j=0; for (var i=0; i<hobbyLength; i++) { if (visForm.hobby[i].checked) { ++j; } } if (j==0) { getId("hobbyExplain").innerHTML="<span class='errorMsg'>请选择1个或多个。</span>"; return false; } else { getId("hobbyExplain").innerHTML=strok; isHobby=true; return true; } } //重置表单 function resetForm() { isUser=false; isPass=false; isRePass=false; isChoose=false; isMail=false; isVocation=false; isHobby=false; //isCheckCode=false; getId("userExplain").innerHTML="由4-20个字符组成,可以是英文字母(区分大小写)、数字、下划线,但不能全是数字。"; getId("passExplain").innerHTML="由6-16个字符组成,可以是任意字符,但不能是空白字符。" getId("repassExplain").innerHTML=""; getId("mailboxExplain").innerHTML="输入必须符合邮件地址格式,如XX@XXX.XX。"; getId("vocationExplain").innerHTML="只能输入中文,比如:工人、教师、学生、农民、公务员、自由职业人等。"; getId("hobbyExplain").innerHTML="(至少选择一个。)"; getId("provinceExplain").innerHTML=""; } //提交前检测Form function checkForm() { if (isUser==true && isPass==true && isRePass==true && isChoose==true && isVocation==true && isHobby==true && isMail==true) { return true; } else { alert("信息没有填完整,请检查一下。"); return false; } } // --></mce:script> </head> <body> <div id="wrap"> <form method="post" action="submit.jsp" name="visForm" οnreset="resetForm()" οnsubmit="return checkForm()" /> <p class="inputStyle"> <!--加 是为了兼容FF,下同--> <span class="listName"> 用户名:</span> <input type="text" name="user" οnblur="return checkUser()" /> <span class="explain" id="userExplain">由4-20个字符组成,可以是英文字母(区分大小写)、数字、下划线,但不能全是数字。</span> </p> <p class="inputStyle"> <span class="listName">输入密码:</span> <input type="password" name="pass" οnblur="return checkPass()" /> <span class="explain" id="passExplain">由6-16个字符组成,可以是任意字符,但不能是空白字符。</span> </p> <p class="inputStyle"> <span class="listName">确认密码:</span> <input type="password" name="repass" οnblur="return checkRePass()" /> <span class="explain" id="repassExplain"></span> </p> <p> <span class="listName"> 性别:</span> <input type="radio" checked="true" name="sex" value="男" /> 男 <input type="radio" name="sex" values="女" /> 女 </p> <p><span class="listName">所在省份:</span> <select name="province" οnchange="return checkProvince()"> <option value="no-choose">请选择</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="浙江">浙江</option> <option value="福建">福建</option> <option value="山东">山东</option> <option value="陕西">陕西</option> <option value="湖南">湖南</option> <option value="河北">河北</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="海南">海南</option> <option value="江西">江西</option> </select> <span class="explain" id="provinceExplain"></span> </p> <p class="inputStyle"> <span class="listName">职业:</span> <input type="text" name="vocation" οnblur="return checkVocation()"/> <span class="explain" id="vocationExplain">只能输入中文,比如:工人、教师、学生、农民、公务员、自由职业人等。</span> </p> <p class="inputStyle"> <span class="listName"> E-mail:</span> <input type="text" name="mailbox" οnblur="return checkMail()" /> <span class="explain" id="mailboxExplain">输入必须符合邮件地址格式,如XX@XXX.XX。</span> </p> <p><span class="listName">兴趣爱好:</span> <input type="checkbox" name="hobby" value="运动" οnclick="return checkHobby()";>运动 <input type="checkbox" name="hobby" value="旅游" οnclick="return checkHobby()";>旅游 <input type="checkbox" name="hobby" value="读书" οnclick="return checkHobby()";>读书 <input type="checkbox" name="hobby" value="看电影" οnclick="return checkHobby()";>看电影 <input type="checkbox" name="hobby" value="玩游戏" οnclick="return checkHobby()";>玩游戏 <input type="checkbox" name="hobby" value="上网" οnclick="return checkHobby()";>上网 <input type="checkbox" name="hobby" value="听音乐" οnclick="return checkHobby()";>听音乐 <input type="checkbox" name="hobby" value="其他" οnclick="return checkHobby()";>其他 <span class="explain" id="hobbyExplain">(至少选择一个。)</span> </p> <!-- <p class="inputStyle"> <span class="listName"> 验证码:</span> <input type="text" name="checkcode" /> <span class="explain">请输入左边的字符。</span> </p> --> <p class="sumAndrest"> <button type="submit" class="btn">提交</button> <button type="reset" class="btn">重置</button> </p> </form> </div> </body> </html>