2021年1月17日作者：Qu

一个表单验证页面

一个表单验证页面

2021年1月17日作者：Qu

表单验证:

(1)用户名不能为空

(2)用户名必须在6–14位之间

(3)用户名只能由数字和字母组成,不能含有其他符号(正则表达式)

(4)密码和确认密码一致,邮箱地址合法

(5)统一失去焦点验证

(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色

(7)文本框再次获得焦点之后,清空错误提示信息,如果文本框中的数据不合法要求清空文本框的value

(8)最终表单中所有项合法之后方可提交表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

<meta charset="UTF-8">
<title>用户注册表单验证</title>
<style>
hr{
color: lightblue;
width: 50%;
}
</style>

<h1 style="text-align:center;color:#ffdd00;font-size:50px;">澳门皇家赌场</h1>
<br>
<h2 style="text-align:center;color:#00ff40;font-size:30px;">首充送充值大礼包</h2>
<script type="text/javascript">
window.onload=function (){
//获取用户名文本框
var userNameObj=document.getElementById("userNameText1");
//用户名文本框失去焦点
userNameObj.onblur=function (){
//如果username为空
if(userNameObj.value==""){
document.getElementById("userNanmeErrorSp").style="color:red;font-size:12px;";
document.getElementById("userNanmeErrorSp").innerText="用户名不允许为空";
noGo();
//alert("不允许为空");
}else{
var regEXP1=/^[a-zA-Z0-9_-]{4,14}$/;
var ok=regEXP1.test(userNameObj.value);
if(!ok){
document.getElementById("userNanmeErrorSp").style="color:red;font-size:12px;";
document.getElementById("userNanmeErrorSp").innerText="用户名不合法"
noGo();
}else{
document.getElementById("userNanmeErrorSp").style="color:green;font-size:12px;";
document.getElementById("userNanmeErrorSp").innerText="用户名可用"
tryGo();
}
}
}
//用户名文本框获取焦点,清除span
userNameObj.onfocus=function (){
document.getElementById("userNanmeErrorSp").innerText="";
}
//获取密码框对象(通过id)
var userPasswordObj1=document.getElementById("userPassword1");

//密码框失去焦点:
userPasswordObj1.onblur=function(){
//如果userPassword为空
if(userPasswordObj1.value==""){
document.getElementById("userPasswordErrorSp1").style="color:red;font-size:12px;";
document.getElementById("userPasswordErrorSp1").innerText="密码不允许为空";
noGo();
}else{
var regEXP2=/^[a-zA-Z]\w{5,17}$/;
var ok=regEXP2.test(userPasswordObj1.value);
if(!ok){
document.getElementById("userPasswordErrorSp1").style="color:red;font-size:12px;";
document.getElementById("userPasswordErrorSp1").innerText="密码以字母开头，长度在6~18之间，只能包含字符、数字和下划线"
noGo();
}else{
document.getElementById("userPasswordErrorSp1").style="color:green;font-size:12px;";
document.getElementById("userPasswordErrorSp1").innerText="密码可用";
tryGo();
}
}
}
//密码框获取焦点,清除span
userPasswordObj1.onfocus=function (){
document.getElementById("userPasswordErrorSp1").innerText="";
}

//获取密码确认框对象
var userPasswordObj2=document.getElementById("userPassword2");
//密码确认框失去焦点:
userPasswordObj2.onblur=function (){
if(document.getElementById("userPasswordErrorSp1").innerText!="密码可用"){
document.getElementById("userPasswordErrorSp2").style="color:red;font-size:12px;";
document.getElementById("userPasswordErrorSp2").innerText="请先正确输入密码"
noGo();
}else if(userPasswordObj2.value==userPasswordObj1.value){
document.getElementById("userPasswordErrorSp2").style="color:green;font-size:12px;";
document.getElementById("userPasswordErrorSp2").innerText="密码确认"
tryGo();
}else{
document.getElementById("userPasswordErrorSp2").style="color:red;font-size:12px;";
document.getElementById("userPasswordErrorSp2").innerText="密码输入不一致"
noGo();
}
}
//密码确认框获取焦点,清除span
userPasswordObj2.onfocus=function (){
document.getElementById("userPasswordErrorSp2").innerText="";
}

//获取邮箱框对象:
var emailTextObj=document.getElementById("emailText");
//邮箱框对象失去焦点
emailTextObj.onblur=function () {
if (emailTextObj.value == "") {
document.getElementById("emailErrorSp").style = "color:red;font-size:12px;";
document.getElementById("emailErrorSp").innerText = "邮箱不允许为空";
noGo();
} else {
var regEXP3 =/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/g;
var ok = regEXP3.test(emailTextObj.value);
if (!ok) {
document.getElementById("emailErrorSp").style = "color:red;font-size:12px;";
document.getElementById("emailErrorSp").innerText = "邮箱填写格式有误"
noGo();
} else {
document.getElementById("emailErrorSp").style = "color:green;font-size:12px;";
document.getElementById("emailErrorSp").innerText = "邮箱可用"
tryGo();
}
}
}
//邮箱对象获取到焦点,清除span
emailTextObj.onfocus=function (){
document.getElementById("emailErrorSp").innerText="";
}
//获取注册按钮对象
var goObj=document.getElementById("go");
tryGo=function(){
if(document.getElementById("userNanmeErrorSp").innerText=="用户名可用"&&
document.getElementById("userPasswordErrorSp1").innerText=="密码可用"&&
document.getElementById("userPasswordErrorSp2").innerText=="密码确认"&&
document.getElementById("emailErrorSp").innerText == "邮箱可用"
){
goObj.type="submit";

goObj.removeAttribute("disabled");
}
}
noGo=function (){
goObj.type="button";
goObj.disabled="disabled";
}
}
</script>

<br><br><br><br><br>
<h3 style="text-align:center;color:#ff0033;font-size:20px;">立即注册:</h3>
<form action="https://www.baidu.com/s?ie=UTF-8&wd=%E5%B9%B4%E8%BD%BB%E4%BA%BA%E4%BD%A0%E7%9A%84%E6%80%9D%E6%83%B3%E5%BE%88%E5%8D%B1%E9%99%A9" method="get">

<hr>

<table align="center" width="500px" height="100" name="tbl">
<tbody><tr>
<td>用户名:</td>
<td> <input type="text" id="userNameText1" name="userNameText"> </td>
<td> <span id="userNanmeErrorSp" style="color: red;font-size:12px;"></span> </td>
</tr>

<tr>
<td>密码:</td>
<td><input type="password" id="userPassword1" name="userPassword" autocomplete="new-password"></td>
<td><span id="userPasswordErrorSp1" style="color: red;font-size:12px;"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="userPassword2" name="userPassword" autocomplete="new-password"></td>
<td><span id="userPasswordErrorSp2" style="color: red;font-size:12px;"></span></td>
</tr>
<tr>
<td>邮箱地址:</td>
<td><input type="text" id="emailText" name="emailText"></td>
<td><span id="emailErrorSp" style="color: red;font-size: 12px;"></span></td>
</tr>
<tr align="center">
<td colspan="2">兴趣爱好:(非必选)</td>
</tr>
<tr>
<td><input type="checkbox" name="interest" value="code" id="like">敲代码<br></td>
<td><input type="checkbox" name="interest" value="smoke">抽烟</td>
</tr>
<tr>
<td><input type="checkbox" name="interest" value="drink">喝酒</td>
<td><input type="checkbox" name="interest" value="womenClothes">女装</td>
</tr>
<tr>
<td><input type="button" id="go" disabled="disabled" value="注册"></td>
<td><input type="reset" value="清空"></td>
</tr>
</tbody></table>
<br>
<hr>
</form>

缺点分析:

1:功能性上,没有去除前后空白,实际上很简单,调用trim()函数,并将它赋给原来的值就好:

1 2	//对文本框内容去除前后空白 userNameObj.value=userNameObj.value.trim();

2.if ( ) {};if后面的小括号()中可以使用Boolean()函数,提高代码的”高级性”

1
2
3
4
5
6

if(Boolean(username))
alert("欢迎您:"+username);
}else{
alert("用户名不能为空")
}
//Boolean函数转化规律:有就换话为true,没有就转化为false

3.Form对象的submit()方法,也可以提交表单,所以并不需要将”button”改为”submit”

4.可以增加一个全选复选框,点击全选时,进行全选/反选,当全选时,自动为该复选框打勾,当不再全选时,取消复选框上的对勾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//这里实全选功能
//获取全选按钮
var allOkObj=document.getElementById("allOk");
//获取所有兴趣爱好按钮
var interests=document.getElementsByName("interest");

//"全部"按钮触发事件
allOkObj.onclick=function(){
for(var i=0;i<interests.length;i++){
interests[i].checked=allOkObj.checked;
}
//对interests数组进行遍历,为所有元素设置鼠标单击事件
for(var j=0;j<interests.length;j++){
interests[j].onclick=function (){
var num=0;
for(var k=0;k<interests.length;k++){
if(interests[k].checked){
num++;
}
}
allOkObj.checked=(interests.length==num);
}
}
}

用户注册表单验证

澳门皇家赌场

首充送充值大礼包

立即注册:

上一篇JS中代码的执行顺序问题下一篇 V2.0 Beta