jQuery表单验证简单示例
就是验证表单里面所信息都为必填?
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
//注册页面验证机制
$（"#username"）。focus（function（）{ //用focus（）表单，当光标在输入框的时候执行下面的代码
$（"#username_error"）。removeClass（"error"）。html（" "）；
$（"#username_succeed"）。removeClass（"succeed"）；
$（this）。removeClass（"highlight2"）
$（"#username_error"）。addClass（"focus"）。html（"学号必须由11位数字组成。如：104084002xx"）；
$（this）。addClass（"highlight1"）；
}）；
$（"#username"）。blur（function（）{ //用blur（）表单，当光标离开输入框的时候执行下面的代码
$value = $.trim（ $（this）。val（） ）； //去掉输入数据左右的空格
if（$value.length == 0 ）
{
$（"#username_error"）。addClass（"error"）。html（"学号不能为空"）；
$（this）。addClass（"highlight2"）；
return false;
}
else
{
$（"#username_error"）。removeClass（"focus"）。html（" "）；
$（this）。removeClass（"highlight1"）；
if（$.isNumeric（$value））
{
if（$value.length == 11）
{
$（"#username_succeed"）。addClass（"succeed"）；
$（"#username_error"）。removeClass（"error"）。html（" "）；
$（this）。removeClass（"highlight2"）
return true;
}
$（"#username_error"）。addClass（"error"）。html（"学号必须为11位"）；
$（this）。addClass（"highlight2"）；
return false;
}
$（"#username_error"）。addClass（"error"）。html（"学号必须为数字"）；
$（this）。addClass（"highlight2"）；
return false;
}
}）；
上面就是JQUERY部分代码，就进行了，对学号的现在和效果显示。下面是用到的样式的代码清单
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.highlight1{
border:1px solid #EFA100;
outline:2px solid #FFDC97;
}
.highlight2{
border:1px solid #f00;
outline:1px solid #FFC1C1;
color:#f00;
}
.focus{
color:#999;
line-height:22px;
text-align:center;
}
.succeed{
background:url（images/pwdstrength.gif） no-repeat -105px 0;
}
也列举出部分HTML代码
?
1
2
3
4
5
6
7
<div>
<span><b>*</b>学号：</span>
<input type="text" id="username" name="userid" />
<label id="username_succeed"></label> //如果符合要求这里就添加SUCCEED样式。否则隐藏
<span class="clr"></span> //清除浮动
<div id="username_error"></div> //如果不符合要求就现在focus样式。
</div>
这样就完成了对输入学号字段的验证。效果友好。
其他的输入框的验证都是依样画葫芦。没什么难点了。
原理：
就是添加CLASS和移除CLASS。达到效果。
页:
[1]