不是一般地好用的jquery表单验证插件-Validform
之前博主推荐过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 , \ 5 b 8 b\ 4 f 53 , 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'))。
三张小图片博主就偷个懒了,直接放到右边了,请君带走,注意重命名哦!