演示页面:https://xiaoa.me/p/windsformvalid/
每次表单每个页面提交都要自己写脚本验证信息,老是复制粘贴的很烦,改起来也很麻烦,网上也有大把的表单验证插件,但是感觉用起来不灵活,这就出现了windsformvalid.
使用方法:
1、引用jquery和windsformvalid.js
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.windformvalid.js" type="text/javascript"></script>
2、通过rule属性给控件增加验证规则,多个规则则用”|”分开,如用户名:
<input type="text" class="input longtext" id="txtlogin" name="txtlogin" rule="nonull|username|5-18|ajax"
ajaxurl="ajax/valid.php" nullmsg="用户名不能为空!" errormsg="用户名格式不正确!" />
rule的值为几种验证规则类型:
特征规则:
nonull:不能为空
define:自定义规则,当使用define规则时,必须给控件增加define属性,如:
<input type="text" id="txtdefine" name="txtdefine" class="input longtext" rule="define"
define="/^hello[0-9]+$/" errormsg="自定义规则格式不正确!" />
ajax:通过ajax到后台验证,当使用ajax规则时,必须给控件增加ajaxurl属性,如上面用户名。
动态规则:
m-n:值长度验证,m,n为整型,如5-18,则验证长度为5-18
=id:值等于验证,该控件值与id的值相等
>n:值大于验证,n为整型,该控件值大于n值
<n:值小于验证,n为整型,该控件值小于n值
<input type="text" id="txtincome" name="txtincome" class="input longtext" rule="nonull|number|>999|<10001" />
常用规则:
username:用户名,以字母开头,包括字母,数字,-_.符号
chinese:中文
email:电子邮箱地址格式
date:日期格式
url:网址格式
number:数字格式(包括小数)
int:整型格式
mobile:国内手机格式
phone:国内电话格式(010-87548888)
post:国内邮编格式
card:身份证号码格式
ip:IP格式
3、消息设置
通过msgtype设置消息类型,0无消息 1通过表格的控件下一个td里面显示消息 2能地alert弹出消息(每次只弹出一个)
当类型为2时,需要设置msgtipnormalclass(默认提示样式),msgtiperrorclass(验证不通过提示样式),msgtippassclass(验证通过提示样式)
4、控件样式改变
当验证不通过时想将输入框变成红色,则设置classchange属性,值为oldclass|newclass,oldclass为默认样式,newclass为验证不通过时需要显示的样式
5、自定义回调验证
有些特征的验证用户需要自定义,则设置callbackvalid方法,验证通过则返回true,未通过则返回false, 如:
"callbackvalid": function() {
if ($('#txtlogin').val() != "stevejobs") {
return false;
}
return true;
}
6、默认消息
defaultnullmsg:为空时默认消息
defaulterrormsg:验证不通过时默认消息
defaultajaxmsg:ajax验证不通过时默认消息
defaultpassmsg:验证通过时默认消息
defaultcallbackmsg:回调验证未通过时默认消息
7、html页面使用,在ready里面使用,如:
$(document).ready(function() {
$("#formdemo").windsformvalid({
"msgtype": 1,
"msgtipnormalclass": "tipmsg",
"msgtiperrorclass": "validerrormsg",
"msgtippassclass": "validpassmsg",
"classchange": "input|errorinput",
"callbackvalid": function() {
if ($('#txtlogin').val() != "stevejobs") {
return false;
}
return true;
}
});
});
最后提供打包下载地址:https://xiaoa.me/p/windsformvalid/windsformvalidv1.0.zip
评论