表单信息注册验证

HTML代码

 1 <legend> 请填写注册信息</legend>
 2   <form action="index.html" method="post">
 3     <table style="text-align: right;">
 4       <tr>
 5         <td>用户名：</td>
 6         <td><input type="text" name="userName" placeholder="由英文字母和数字组成的4-16位字符，以字母开头">
 7         </td>
 8       </tr>
 9       <tr>
10         <td>昵称：</td>
11         <td><input type="text" name="nickName" placeholder="由2-6个汉字组成">
12         </td>
13       </tr>
14       <tr>
15         <td>邮箱：</td>
16         <td><input type="text" name="email" placeholder="邮箱账号@域名。如[email protected]、[email protected]">
17         </td>
18       </tr>
19       <tr>
20         <td>密码：</td>
21         <td><input type="password" name="pwd" placeholder="由英文字母和数字组成的4-10位字符">
22         </td>
23       </tr>
24       <tr>
25         <td>确认密码：</td>
26         <td><input type="password" name="pwd2" placeholder="确认密码">
27         </td>
28       </tr>
29       <tr>
30         <td>手机号码：</td>
31         <td><input type="text" name="phone" placeholder="手机号由11位数字组成，且以13,15,18开头">
32         </td>
33       </tr>
34       <tr>
35         <td>出生日期：</td>
36         <td><input type="text" name="date" placeholder="出生日期在1990-2009之间">
37       </tr>
38       <tr>
39         <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td>
40       </tr>
41     </table>
42   </form>
43 </fieldset>

JS 代码

  1 //验证用户名
  2 function check_userName() {
  3   var userName = document.getElementById("name").value;
  4   var regName = /[a-zA-Z]\w{4,16}/
  5   if (userName == "" || userName.trim() == "") {
  6     document.getElementById("err_name").innerHTML = "请输入用户名";
  7     return false;
  8   } else if (!regName.test(userName)) {
  9     document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符，以字母开头";
 10     return false;
 11   } else {
 12     document.getElementById("err_name").innerHTML = "ok!!!";
 13     return true;
 14   }
 15 }
 16 //验证昵称
 17 function check_nickName() {
 18   var nickName = document.getElementById("nick").value;
 19   var regName = /[\u4e00-\u9fa5]{2,6}/
 20   if (nickName == "" || nickName.trim() == "") {
 21     document.getElementById("err_nick").innerHTML = "请输入昵称";
 22     return false;
 23   } else if (!regName.test(nickName)) {
 24     document.getElementById("err_nick").innerHTML = "由2-6个汉字组成";
 25     return false;
 26   } else {
 27     document.getElementById("err_nick").innerHTML = "ok!!!";
 28     return true;
 29   }
 30 }
 31 //验证邮箱
 32 function check_email() {
 33   var email = document.getElementById("email").value;
 34   var regEmail = /^\w+@\w+((\.\w+)+)$/;
 35   if (email == "" || email.trim() == "") {
 36     document.getElementById("err_email").innerHTML = "请输入邮箱";
 37     return false;
 38   } else if (!regEmail.test(email)) {
 39     document.getElementById("err_email").innerHTML = "邮箱账号@域名。如[email protected]、[email protected]";
 40     return false;
 41   } else {
 42     document.getElementById("err_email").innerHTML = "ok!!!";
 43     return true;
 44   }
 45 }
 46 //验证密码
 47 function check_pwd() {
 48   var pwd = document.getElementById("pwd").value;
 49   var regPwd = /^\w{4,10}$/;
 50   if (pwd == "" || pwd.trim() == "") {
 51     document.getElementById("err_pwd").innerHTML = "请输入密码";
 52     return false;
 53   } else if (!regPwd.test(pwd)) {
 54     document.getElementById("err_pwd").innerHTML = "格式错误";
 55     return false;
 56   } else {
 57     document.getElementById("err_pwd").innerHTML = "ok!!!";
 58     return true;
 59   }
 60 }
 61 //确认密码
 62 function check_pwd2() {
 63   var pwd = document.getElementById("pwd").value;
 64   var pwd2 = document.getElementById("pwd2").value;
 65   if (pwd2 == "" || pwd2.trim() == "") {
 66     document.getElementById("err_pwd2").innerHTML = "请输入密码";
 67     return false;
 68   } else if (!pwd2.equals(pwd)) {
 69     document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";
 70     return false;
 71   } else {
 72     document.getElementById("err_pwd2").innerHTML = "ok!!!";
 73     return true;
 74   }
 75 }
 76 //验证手机号
 77 function check_phone() {
 78   var phone = document.getElementById("phone").value;
 79   var regPhone = /[13,15,18]\d{9}/;
 80   if (phone == "" || phone.trim() == "") {
 81     document.getElementById("err_phone").innerHTML = "请输入手机号";
 82     return false;
 83   } else if (!regPhone.test(phone)) {
 84     document.getElementById("err_phone").innerHTML = "手机号由11位数字组成，且以13,15,18开头";
 85     return false;
 86   } else {
 87     document.getElementById("err_phone").innerHTML = "ok!!!";
 88     return true;
 89   }
 90 }
 91 //验证时间
 92 function check_date() {
 93   var birthday = document.getElementById("birthday").value;
 94   var regDate = /[13,15,18]\d{9}/;
 95   if (birthday == "" || birthday.trim() == "") {
 96     document.getElementById("err_date").innerHTML = "请输入日期";
 97     return false;
 98   } else if (!regDate.test(birthday)) {
 99     document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间";
100     return false;
101   } else {
102     document.getElementById("err_date").innerHTML = "ok!!!";
103     return true;
104   }
105 }

jQuery 代码

 1 $(function () {
 2      var errMsg;
 3      $.each($("input"), function (i, val) {
 4        $(val).blur(function () {
 5          if ($(val).attr("name") == "userName") {
 6            $(".nameMsg").remove();
 7            var userName = val.value;
 8            var regName = /[a-zA-Z]\w{4,16}/
 9            if (userName == "" || userName.trim() == "") {
10              errMsg = "<span class='nameMsg' style='color:red;'>用户名不能为空</span>";
11            } else if (!regName.test(userName)) {
12              errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和数字组成的4-16位字符，以字母开头</span>";
13            } else {
14              errMsg = "<span class='nameMsg' style='color:red;'>OK！</span>";
15            }
16            $(this).parent().append(errMsg);
17          } else if ($(val).attr("name") == "nickName") {
18            $(".nickMsg").remove();
19            var nickName = val.value;
20            var regName = /[\u4e00-\u9fa5]{2,6}/
21            if (nickName == "" || nickName.trim() == "") {
22              errMsg = "<span class='nickMsg' style='color:red;'>昵称不能为空</span>";
23            } else if (!regName.test(nickName)) {
24              errMsg = "<span class='nickMsg' style='color:red;'>由2-6个汉字组成</span>";
25            } else {
26              errMsg = "<span class='nickMsg' style='color:red;'>OK！</span>";
27            }
28            $(this).parent().append(errMsg);
29          } else if ($(val).attr("name") == "email") {
30            $(".emailMsg").remove();
31            var email = val.value;
32            var regEmail = /^\w+@\w+((\.\w+)+)$/;
33            if (email == "" || email.trim() == "") {
34              errMsg = "<span class='emailMsg' style='color:red;'>邮箱不能为空</span>";
35            } else if (!regEmail.test(email)) {
36              errMsg = "<span class='emailMsg' style='color:red;'>邮箱账号@域名。如[email protected]、[email protected]</span>";
37            } else {
38              errMsg = "<span class='emailMsg' style='color:red;'>OK！</span>";
39            }
40            $(this).parent().append(errMsg);
41          } else if ($(val).attr("name") == "pwd") {
42            $(".pwdMsg").remove();
43            var pwd = val.value;
44            var regPwd = /^\w{4,10}$/;
45            if (pwd == "" || pwd.trim() == "") {
46              errMsg = "<span class='pwdMsg' style='color:red;'>密码不能为空</span>";
47            } else if (!regPwd.test(pwd)) {
48              errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>";
49            } else {
50              errMsg = "<span class='pwdMsg' style='color:red;'>OK！</span>";
51            }
52            $(this).parent().append(errMsg);
53          } else if ($(val).attr("name") == "pwd2") {
54            $(".pwd2Msg").remove();
55            var pwd2 = val.value;
56            var pwd = $("input")[3].value;
57            if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {
58              errMsg = "<span class='pwd2Msg' style='color:red;'>两次输入密码不一致</span>";
59            } else {
60              errMsg = "<span class='pwd2Msg' style='color:red;'>OK！</span>";
61            }
62            $(this).parent().append(errMsg);
63          } else if ($(val).attr("name") == "phone") {
64            $(".phoneMsg").remove();
65            var phone = val.value;
66            var regPhone = /[13,15,18]\d{9}/;
67            if (phone == "" || phone.trim() == "") {
68              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 手机号不能为空 < /span>"
69            } else if (!regPhone.test(phone)) {
70              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式错误 < /span>"
71            } else {
72              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > OK！ < /span>"
73            }
74            $(this).parent().append(errMsg);
75          } else if ($(val).attr("name") == "date") {
76            $(".dateMsg").remove();
77            var birthday = val.value;
78            var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;
79            if (birthday == "" || birthday.trim() == "") {
80              errMsg = "<span class='dateMsg' style='color:red;'>请输入生日</span>";
81            } else if (!regDate.test(birthday)) {
82              errMsg = "<span class='dateMsg' style='color:red;'>格式错误</span>";
83            } else {
84              errMsg = "<span class='dateMsg' style='color:red;'>OK！</span>";
85            }
86            $(this).parent().append(errMsg);
87          }
88        });
89      });
90    });