JavaScript表单验证完美代码

弘毅

　　用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
　　用原生JS写一个简单的表单验证
　　首先，是html部分
　　

1. <div class="divAll">
   
2. 　　<div id="titles">新用户注册</div>
   
3. 　　<div id="contents">
   
4. 　　<h3>基本信息</h3>
   
5. 　　<hr width="95%" color="#f2f2f2"/>
   
6. 　　<form action="#">
   
7. 　　<div id="form-itemGroup">
   
8. 　　<label for="userName">用户名：</label>
   
9. 　　<input type="text" id="userName" class="userName">
   
10. 　　<span class="default" id="nameErr">请输入至少3位的用户名</span>
    
11. 　　</div>
    
12. 　　<div id="form-itemGroup">
    
13. 　　<label for="userPasword">密码：</label>
    
14. 　　<input type="password" id="userPasword" class="userName">
    
15. 　　<span class="default" id="passwordErr">请输入4到8位的密码</span>
    
16. 　　</div>
    
17. 　　<div id="form-itemGroup">
    
18. 　　<label for="userConfirmPasword">确认密码：</label>
    
19. 　　<input type="password" id="userConfirmPasword" class="userName">
    
20. 　　<span class="default" id="conPasswordErr">请再输入一遍密码</span>
    
21. 　　</div>
    
22. 　　<div id="form-itemGroup">
    
23. 　　<label for="userPhone">手机号码：</label>
    
24. 　　<input type="text" id="userPhone" class="userName">
    
25. 　　<span class="default" id="phoneErr">请输入11位手机号码</span>
    
26. 　　</div>
    
27. 　　<div>
    
28. 　　<button type="submit" class="divBtn">注册</button>
    
29. 　　</div>
    
30. 　　</form>
    
31. 　　</div>
    
32. 　　</div>

复制代码

　　接着，为其加上CSS样式
　　

1. <style type="text/css">
   
2. 　　.divAll{
   
3. 　　width:800px;
   
4. 　　font-family:'黑体';
   
5. 　　margin:50px auto;
   
6. 　　}
   
7. 　　#titles{
   
8. 　　font-weight:bold;
   
9. 　　font-size:18px;
   
10. 　　height:50px;
    
11. 　　line-height:50px;
    
12. 　　background:#FFF9F3;
    
13. 　　text-align:center;  
    
14. 　　border:1px solid #CCC;;
    
15. 　　}
    
16. 　　#contents{
    
17. 　　margin-top:20px;
    
18. 　　background:#FFF9F3;
    
19. 　　border:1px solid #CCC;;
    
20. 　　}
    
21. 　　#form-itemGroup{
    
22. 　　padding:10px;  
    
23. 　　}
    
24. 　　#form-itemGroup label{
    
25. 　　display:inline-block;
    
26. 　　width:100px;
    
27. 　　height:32px;
    
28. 　　line-height:32px;
    
29. 　　color:#666;
    
30. 　　text-align:right;
    
31. 　　}
    
32. 　　#form-itemGroup .userName{
    
33. 　　width:200px;
    
34. 　　height:40px;
    
35. 　　line-height:40px;
    
36. 　　border:1px solid #CCC;
    
37. 　　}   
    
38. 　　#form-itemGroup .default{
    
39. 　　width:200px;
    
40. 　　height:32px;
    
41. 　　line-height:32px;
    
42. 　　color:#999;
    
43. 　　}  
    
44. 　　#form-itemGroup .error{
    
45. 　　height:32px;
    
46. 　　line-height:32px;
    
47. 　　color:#F00;
    
48. 　　}
    
49. 　　#form-itemGroup .success{
    
50. 　　height:32px;
    
51. 　　line-height:32px;
    
52. 　　color:#096;
    
53. 　　}  
    
54. 　　.divBtn{
    
55. 　　margin-top:20px;
    
56. 　　margin-left:200px;
    
57. 　　width:100px;
    
58. 　　height:32px;
    
59. 　　line-height:32px;
    
60. 　　background-color:#F93;
    
61. 　　margin-bottom:10px;
    
62. 　　color:#ffffff;
    
63. 　　font-weight:bold;
    
64. 　　border:none;
    
65. 　　}
    
66. 　　</style>

复制代码

　　最后是JS部分
　　

1. <script type="text/javascript">
   
2. 　　function checkForm(){
   
3. 　　var nametip = checkUserName();
   
4. 　　var passtip = checkPassword();  
   
5. 　　var conpasstip = ConfirmPassword();
   
6. 　　var phonetip = checkPhone();
   
7. 　　return nametip && passtip && conpasstip && phonetip;
   
8. 　　}
   
9. 　　//验证用户名   
   
10. 　　function checkUserName(){
    
11. 　　var username = document.getElementById('userName');
    
12. 　　var errname = document.getElementById('nameErr');
    
13. 　　var pattern = /^\w{3,}$/;  //用户名格式正则表达式：用户名要至少三位
    
14. 　　if(username.value.length == 0){
    
15. 　　errname.innerHTML="用户名不能为空"
    
16. 　　errname.className="error"
    
17. 　　return false;
    
18. 　　}
    
19. 　　if(!pattern.test(username.value)){
    
20. 　　errname.innerHTML="用户名不合规范"
    
21. 　　errname.className="error"
    
22. 　　return false;
    
23. 　　}
    
24. 　　else{
    
25. 　　errname.innerHTML="OK"
    
26. 　　errname.className="success";
    
27. 　　return true;
    
28. 　　}
    
29. 　　}
    
30. 　　//验证密码   
    
31. 　　function checkPassword(){
    
32. 　　var userpasswd = document.getElementById('userPasword');
    
33. 　　var errPasswd = document.getElementById('passwordErr');
    
34. 　　var pattern = /^\w{4,8}$/; //密码要在4-8位
    
35. 　　if(!pattern.test(userpasswd.value)){
    
36. 　　errPasswd.innerHTML="密码不合规范"
    
37. 　　errPasswd.className="error"
    
38. 　　return false;
    
39. 　　}
    
40. 　　else{
    
41. 　　errPasswd.innerHTML="OK"
    
42. 　　errPasswd.className="success";
    
43. 　　return true;
    
44. 　　}
    
45. 　　}
    
46. 　　//确认密码
    
47. 　　function ConfirmPassword(){
    
48. 　　var userpasswd = document.getElementById('userPasword');
    
49. 　　var userConPassword = document.getElementById('userConfirmPasword');
    
50. 　　var errConPasswd = document.getElementById('conPasswordErr');
    
51. 　　if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){
    
52. 　　errConPasswd.innerHTML="上下密码不一致"
    
53. 　　errConPasswd.className="error"
    
54. 　　return false;
    
55. 　　}
    
56. 　　else{
    
57. 　　errConPasswd.innerHTML="OK"
    
58. 　　errConPasswd.className="success";
    
59. 　　return true;
    
60. 　　}   
    
61. 　　}
    
62. 　　//验证手机号
    
63. 　　function checkPhone(){
    
64. 　　var userphone = document.getElementById('userPhone');
    
65. 　　var phonrErr = document.getElementById('phoneErr');
    
66. 　　var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
    
67. 　　if(!pattern.test(userphone.value)){
    
68. 　　phonrErr.innerHTML="手机号码不合规范"
    
69. 　　phonrErr.className="error"
    
70. 　　return false;
    
71. 　　}
    
72. 　　else{
    
73. 　　phonrErr.innerHTML="OK"
    
74. 　　phonrErr.className="success";
    
75. 　　return true;
    
76. 　　}
    
77. 　　}
    
78. 　　</script>

复制代码

　　好了，打开浏览器测试一下吧

　

　　填写数据，可以！

　

　　以上所述是小编给大家介绍的JavaScript表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！