之前博主推荐过jQuery Validate，因为之前也在用，但是配置稍微显得有些麻烦，直到最近的这个项目用到了validform，才让我大开眼界，整个界面突然感觉太友好了，先来几张效果图吧。
整个过程引用的css及js非常少。
css如下：
|
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
|
/*==========以下部分是Validform必须的===========*/
/*==========可以根据自己喜好适当修改（所用图标会在后面提供）===========*/
.Validform_checktip{
margin-left:8px;
line-height:20px;
height:20px;
overflow:hidden;
color:#999;
font-size:12px;
}
.Validform_right{
color:#71b83d;
padding-left:20px;
background:url(/Public/home/images/right.png) no-repeat left center;
}
.Validform_wrong{
color:red;
padding-left:20px;
white-space:nowrap;
background:url(/Public/home/images/error.png) no-repeat left center;
}
.Validform_loading{
padding-left:20px;
background:url(/Public/home/images/onLoad.gif) no-repeat left center;
}
.Validform_error{
background-color:#ffe7e7;
}
#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; width:280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}
#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#000;}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}
#Validform_msg a.Validform_close:hover{color:#cc0;}
#Validform_msg .Validform_info{padding:8px;border:1px solid #000; border-top:none; text-align:left;}
|
js引用也不多，固定不变就行。
|
1
2
3
4
5
6
7
8
9
|
<script type="text/javascript" src="/Public/home/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
$("#signupform").Validform({//给form表单取个id吧
tiptype:3,//1,2,3呈现不同效果，可以自行尝试，当然3是最好
showAllError:true//全部显示错误提示，默认就行
});
})
</script>
|
接下来就是部分表单示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<table width="80%">
<tr>
<td width="100">用户名</td>
<td width="*"><input type="text" name="username" id="username" datatype="s2-12" nullmsg="请输入用户名！" errormsg="昵称至少2个字符,最多12个字符！" ajaxurl="<?php echo U('user/checkName') ?>" placeholder="2-12个字符"/></td>
</tr>
<tr>
<td width="100">设置密码</td>
<td><input type="password" name="password" id="password" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" placeholder="6-16个字符"/></td>
</tr>
<tr>
<td width="100">确认密码</td>
<td><input type="password" name="repassword" id="repassword" datatype="*6-16" recheck="password" nullmsg="请设置确认密码！" errormsg="请与上面密码保持一致！" placeholder="6-16个字符"/></td>
</tr>
|
datatype插件js中有说明（详细直接看js源码）
|
1
|
{"*":"不能为空！","*6-16":"请填写6到16位任意字符！","n":"请填写数字！","n6-16":"请填写6到16位数字！","s":"不能输入特殊字符！","s6-18":"请填写6到18位字符！","p":"请填写邮政编码！","m":"请填写手机号码！","e":"邮箱地址格式不对！","url":"请填写网址！"}
|
需要关注的是ajaxurl这是异步验证，以前自己写表单验证的复杂步骤就省掉了，比如用户名、邮箱是否重复，原始密码是否相等，recheck是判断两次输入密码是否一致，其他就没什么了，如有需要博主可尽绵薄之力。
关于ajaxurl补充一点,可以传递参数，以thinkphp框架为例 ajaxurl="<?php echo U('User/checkName',array('type1' =>1,'type2' =>2))?>"，请务必打开firebug或者network查看参数的传递情况，这种传参方式必须要用get来接收（I('get.type1'),I('get.type2')）。
三张小图片博主就偷个懒了，直接放到右边了，请君带走，注意重命名哦！