jQuery/javascript实现网页注册的表单验证
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>注册表单验证</title>
5 <script src="jquery.js"></script>
6 <style type="text/css">
7 table{background-color:pink;width:80%;height:300px;}
8 td{text-align:center;}
9 </style>
10 <script language="javascript">
11 $("document").ready(function(){
12 $("#form1").submit(function(){
13 var user=$("#user").val();
14 var username=/^[a-z]{6,10}/i;
15 if(user.length==0){
16 $("#error1").html("账号不可以为空");
17 return false;
18 }else if(!username.test(user)){
19 $("#error1").html("请输入6-10的字母");
20 return false;
21 }else{
22 $("#error1").html("输入正确");
23 }
24
25 var password=$("#pw").val();
26 var password1=/^[0-9]{6,10}/;
27 if(password.length==0){
28 $("#error2").html("密码不可以为空");
29 return false;
30 }else if(!password1.test(password)){
31 $("#error2").html("请输入6-10位的数字密码");
32 return false;
33 }else{
34 $("#error2").html("输入正确");
35 }
36
37 var name=$("#name").val();
38 var name1=/^[a-z]{6,10}/i;
39 if(name.length==0){
40 $("#error3").html("姓名不可以为空");
41 return false;
42 }else if(!name1.test(name)){
43 $("#error3").html("请输入6-10位字母");
44 return false;
45 }else{
46 $("#error3").html("输入正确");
47 }
48
49
50 var age=$("#ag").val();
51 var age1=/^[1-9]{1}[0-9]{0,1}$/;
52 if(age.length==0){
53 $("#error4").html("年龄不可以为空");
54 return false;
55 }else if(!age1.test(age)){
56 $("#error4").html("请输入合法年龄");
57 return false;
58 }else{
59 $("#error4").html("输入正确");
60 }
61
62 var email=$("#em").val();
63 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
64 if(email.length==0){
65 $("#error5").html("email不可以为空");
66 return false;
67 }else if(!email1.test(email)){
68 $("#error5").html("请输入合法电子邮件");
69 return false;
70 }else{
71 $("#error5").html("输入正确");
72 }
73
74 var telephone=$("#tel").val();
75 var telephone1=/^[1]{1}[0-9]{10}/;
76 if(telephone.length==0){
77 $("#error6").html("电话不可以为空");
78 return false;
79 }else if(!telephone1.test(telephone)){
80 $("#error6").html("请输入合法电话");
81 return false;
82 }else{
83 $("#error6").html("输入正确");
84 }
85
86 });
87 });
88 </script>
89 </head>
90 <body>
91 <center>
92 <form action="" method="post" id="form1" name="form1">
93 <h1>注册页面</h1>
94 <table border="1px">
95 <tr>
96 <td>
97 账 号：
98 <input type="text" name="admin" id="user"/>
99 <div id="error1" style="display:inline;color:red;"></div>
100 </td>
101 </tr>
102 <tr>
103 <td>
104 密 码：
105 <input type="password" name="password" id="pw"/>
106 <div id="error2" style="display:inline;color:red;"></div>
107 </td>
108 </tr>
109 <tr>
110 <td>
111 姓 名：
112 <input type="text" name="name1" id="name"/>
113 <div id="error3" style="display:inline;color:red;"></div>
114 </td>
115 </tr>
116 <tr>
117 <td>
118 年 龄：
119 <input type="text" name="age" id="ag"/>
120 <div id="error4" style="display:inline;color:red;"></div>
121 </td>
122 </tr>
123 <tr>
124 <td>
125 性别：
126 <input type="radio" name="sex" value="boy"/>男
127 <input type="radio" name="sex" value="girl"/>女
128 </td>
129 </tr>
130 <tr>
131 <td>
132 电子邮件：<input type="text" name="email" id="em"/>
133 <div id="error5" style="display:inline;color:red;"></div>
134 </td>
135 </tr>
136 <tr>
137 <td>
138 电话号码：<input type="text" name="telephone" id="tel"/>
139 <div id="error6" style="display:inline;color:red;"></div>
140 </td>
141 </tr>
142 <tr>
143 <td align="center">
144 <input type="submit" value="注册"/>
145
146 </td>
147
148 </tr>
149 </table>
150 </form>
151 </center>
152 </body>
153 </html>
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>正则表达式表单验证</title>
5 <style type="text/css">
6 table{background-color:yellow;border:2px blue solid;}
7 </style>
8 </head>
9 <body>
10 <center>
11 <form action="login.html" method="post" onsubmit="return isForm()">
12 <h1>注册页面</h1>
13 <table border="1px" width="350px" height="400px">
14 <tr>
15 <td>
16 账 号：
17 <input type="text" name="username" id="user"/>
18 <div id="error1" style="display:inline;color:red;"></div>
19 </td>
20 </tr>
21 <tr>
22 <td>
23 密 码：
24 <input type="password" name="password" id="pw"/>
25 <div id="error2" style="display:inline;color:red;"></div>
26 </td>
27 </tr>
28 <tr>
29 <td>
30 姓 名：
31 <input type="text" name="name1" id="name"/>
32 <div id="error3" style="display:inline;color:red;"></div>
33 </td>
34 </tr>
35 <tr>
36 <td>
37 性 别：
38 <input type="radio" name="sex" value="boy"/>男
39 <input type="radio" name="sex" value="girl"/>女
40 </td>
41 </tr>
42 <tr>
43 <td>
44 年 龄：
45 <input type="text" name="age" id="ag"/>
46 <div id="error4" style="display:inline;color:red;"></div>
47 </td>
48 </tr>
49 <tr>
50 <td>
51 电子邮件：<input type="text" name="email" id="em"/>
52 <div id="error5" style="display:inline;color:red;"></div>
53 </td>
54 </tr>
55 <tr>
56 <td>
57 电话号码：<input type="text" name="telephone" id="tel"/>
58 <div id="error6" style="display:inline;color:red;"></div>
59 </td>
60 </tr>
61 <tr>
62 <td align="center">
63 <input type="submit" value="注册"/>
64 </td>
65 </tr>
66 </table>
67 </form>
68 <script language="javascript">
69 function isForm(){
70 var username=document.getElementById("user").value;
71 var password=document.getElementById("pw").value;
72 var name=document.getElementById("name").value;
73 var age=document.getElementById("ag").value;
74 var email=document.getElementById("em").value;
75 var telephone=document.getElementById("tel").value;
76
77
78 var error1=document.getElementById("error1");
79 var error2=document.getElementById("error2");
80 var error3=document.getElementById("error3");
81 var error4=document.getElementById("error4");
82 var error5=document.getElementById("error5");
83 var error6=document.getElementById("error6");
84
85 var username1=/^[a-z]{6,10}/i;
86 var password1=/^[0-9]{6,10}/;
87 var name1=/^[a-z]{6,10}/i;
88 var age1=/^[1-9]{1}[0-9]{0,1}$/;
89 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
90 var telephone1=/^[1]{1}[0-9]{10}/;
91
92
93
94 if(!username1.test(username)){
95 alert("请输出6-10位字母");
96 return false;
97 }
98 error1.innerHTML="输入正确";
99 if(!password1.test(password)){
100 alert("请输入6-10的数字密码");
101 return false;
102 }
103 error2.innerHTML="输入正确";
104 if(!name1.test(name)){
105 alert("请输入6-10位字母");
106 return false;
107 }
108 error3.innerHTML="输入正确";
109 if(!age1.test(age)){
110 alert("请输入合法的年龄");
111 return false;
112 }
113 error4.innerHTML="输入正确";
114 if(!email1.test(email)){
115 alert("请输入合法电子邮件");
116 return false;
117 }
118 error5.innerHTML="输入正确";
119 if(!telephone1.test(telephone)){
120 alert("请输人电话联系方式");
121 return false;
122 }
123 error6.innerHTML="输入正确";
124 return true;
125 }
126
127 </script>
128 </center>
129 </body>
130 </html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-09-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读