javascript实现简单用户登录表单验证功能
来源：互联网 发布：员工测评软件 编辑：程序博客网 时间：2024/05/21 06:48
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript"> function checkname(){ var div = document.getElementById("div1"); div.innerHTML = ""; var name1 = document.form1.text1.value; if (name1 == "") { div.innerHTML = "姓名不能为空！"; document.form1.text1.focus(); return false; } if (name1.length < 4 || name1.length > 16) { div.innerHTML = "姓名输入的长度4-16个字符！"; document.form1.text1.select(); return false; } var charname1 = name1.toLowerCase(); for (var i = 0; i < name1.length; i++) { var charname = charname1.charAt(i); if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) { div.innerHTML = "姓名包含非法字母，只能包含字母，数字，和下划线"; document.form1.text1.select(); return false; } } return true; } function checkpassword(){ var div = document.getElementById("div2"); div.innerHTML = ""; var password = document.form1.text2.value; if (password == "") { div.innerHTML = "密码不位空！"; document.form1.text2.focus(); return false; } if (password.length < 4 || password.length > 12) { div.innerHTML = "密码长度4-12位"; document.form1.text2.select(); return false; } return true; } function checkrepassword(){ var div = document.getElementById("div3"); div.innerHTML = ""; var password = document.form1.text2.value; var repass = document.form1.text3.value; if (repass == "") { div.innerHTML = "密码不位空！"; document.form1.text3.focus(); return false; } if (password != repass) { div.innerHTML = "输入密码和确认密码长度不一致"; document.form1.text3.select(); return false; } return true; } function checkEmail(){ var div = document.getElementById("div4"); div.innerHTML = ""; var email = document.form1.text5.value; var sw = email.indexOf("@", 0); var sw1 = email.indexOf(".", 0); var tt = sw1 - sw; if (email.length == 0) { div.innerHTML = "电子邮件不能位空"; document.form1.text5.focus(); return false; } if (email.indexOf("@", 0) == -1) { div.innerHTML = "电子邮件格式不正确，必须包含@符号！"; document.form1.text5.select(); return false; } if (email.indexOf(".", 0) == -1) { div.innerHTML = "电子邮件格式不正确，必须包含.符号！"; document.form1.text5.select(); return false; } if (tt == 1) { div.innerHTML = "邮件格式不对。@和.不可以挨着！"; document.form1.text5.select(); return false; } if (sw > sw1) { div.innerHTML = "电子邮件格式不正确，@符号必须在.之前"; document.form1.text5.select(); return false; } else { return true; } return ture; } function check(){ if (checkname() && checkpassword() && checkrepassword() && checkEmail()) { return true; } else { return false; } } </script> </head> <body> <form name="form1" method="post" action="2.html" onsubmit="return check()"> <table> <tr> <td> 用户名： </td> <td> <input id="text1" type="text" name="text1" onblur="check()"> <div id="div1" style="display:inline"> </div> </td> </tr> <tr> <td> 密码： </td> <td> <input id="text2" type="password" name="text2" onblur="check()"> <div id="div2" style="display:inline"> </div> </td> </tr> <tr> <td> 确认密码： </td> <td> <input id="text3" type="password" name="text3" onblur="check()"> <div id="div3" style="display:inline"> </div> </td> </tr> <tr> <td> 电子邮件地址： </td> <td> <input id="text4" type="text" name="text4" onblur="check()"> <div id="div4" style="display:inline"> </div> </td> </tr> <tr align="center"> <td align="center"> <input type="submit" value="提交" name="tect6"><input type="reset" value="重置" name="text7"> </td> </tr> </table> </form> </body></html>
