javascript表单验证代码

最新推荐文章于 2024-04-20 14:59:10 发布

原创最新推荐文章于 2024-04-20 14:59:10 发布 · 727 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #function #input #border #读书

Javascript 专栏收录该内容

6 篇文章

订阅专栏

本文提供了一段自行编写的JavaScript代码，用于实现网页表单的各项验证功能，包括用户名、密码、邮箱格式等验证，并附带了完整的HTML页面结构。

javascript表单验证代码

花了两天时间自己写了一个表单验证的JS代码:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form check!</title> <mce:style type="text/css"></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"></mce:script> </head> <body> <div id="wrap"> <form method="post" action="submit.jsp" name="visForm" onreset="resetForm()" onsubmit="return checkForm()" /> <p class="inputStyle">  <span class="listName"> 用户名：</span> <input type="text" name="user" onblur="return checkUser()" /> <span class="explain" id="userExplain">由4-20个字符组成，可以是英文字母(区分大小写)、数字、下划线，但不能全是数字。</span> </p> <p class="inputStyle"> <span class="listName">输入密码：</span> <input type="password" name="pass" onblur="return checkPass()" /> <span class="explain" id="passExplain">由6-16个字符组成，可以是任意字符，但不能是空白字符。</span> </p> <p class="inputStyle"> <span class="listName">确认密码：</span> <input type="password" name="repass" onblur="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" onchange="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" onblur="return checkVocation()"/> <span class="explain" id="vocationExplain">只能输入中文，比如：工人、教师、学生、农民、公务员、自由职业人等。</span> </p> <p class="inputStyle"> <span class="listName"> E-mail：</span> <input type="text" name="mailbox" onblur="return checkMail()" /> <span class="explain" id="mailboxExplain">输入必须符合邮件地址格式，如XX@XXX.XX。</span> </p> <p><span class="listName">兴趣爱好：</span> <input type="checkbox" name="hobby" value="运动" onclick="return checkHobby()";>运动 <input type="checkbox" name="hobby" value="旅游" onclick="return checkHobby()";>旅游 <input type="checkbox" name="hobby" value="读书" onclick="return checkHobby()";>读书 <input type="checkbox" name="hobby" value="看电影" onclick="return checkHobby()";>看电影 <input type="checkbox" name="hobby" value="玩游戏" onclick="return checkHobby()";>玩游戏 <input type="checkbox" name="hobby" value="上网" onclick="return checkHobby()";>上网 <input type="checkbox" name="hobby" value="听音乐" onclick="return checkHobby()";>听音乐 <input type="checkbox" name="hobby" value="其他" onclick="return checkHobby()";>其他 <span class="explain" id="hobbyExplain">（至少选择一个。）</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"></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"></mce:script> </head> <body> <div id="wrap"> <form method="post" action="submit.jsp" name="visForm" onreset="resetForm()" onsubmit="return checkForm()" /> <p class="inputStyle">  <span class="listName"> 用户名：</span> <input type="text" name="user" onblur="return checkUser()" /> <span class="explain" id="userExplain">由4-20个字符组成，可以是英文字母(区分大小写)、数字、下划线，但不能全是数字。</span> </p> <p class="inputStyle"> <span class="listName">输入密码：</span> <input type="password" name="pass" onblur="return checkPass()" /> <span class="explain" id="passExplain">由6-16个字符组成，可以是任意字符，但不能是空白字符。</span> </p> <p class="inputStyle"> <span class="listName">确认密码：</span> <input type="password" name="repass" onblur="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" onchange="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" onblur="return checkVocation()"/> <span class="explain" id="vocationExplain">只能输入中文，比如：工人、教师、学生、农民、公务员、自由职业人等。</span> </p> <p class="inputStyle"> <span class="listName"> E-mail：</span> <input type="text" name="mailbox" onblur="return checkMail()" /> <span class="explain" id="mailboxExplain">输入必须符合邮件地址格式，如XX@XXX.XX。</span> </p> <p><span class="listName">兴趣爱好：</span> <input type="checkbox" name="hobby" value="运动" onclick="return checkHobby()";>运动 <input type="checkbox" name="hobby" value="旅游" onclick="return checkHobby()";>旅游 <input type="checkbox" name="hobby" value="读书" onclick="return checkHobby()";>读书 <input type="checkbox" name="hobby" value="看电影" onclick="return checkHobby()";>看电影 <input type="checkbox" name="hobby" value="玩游戏" onclick="return checkHobby()";>玩游戏 <input type="checkbox" name="hobby" value="上网" onclick="return checkHobby()";>上网 <input type="checkbox" name="hobby" value="听音乐" onclick="return checkHobby()";>听音乐 <input type="checkbox" name="hobby" value="其他" onclick="return checkHobby()";>其他 <span class="explain" id="hobbyExplain">（至少选择一个。）</span> </p>  <p class="sumAndrest"> <button type="submit" class="btn">提交</button> <button type="reset" class="btn">重置</button> </p> </form> </div> </body> </html>