windsformvalid-表单验证JQuery插件

分类:Javascript 评论:No Comments 作者:awinds 发布时间:2012-07-24 阅读:26

演示页面:http://lijian.net/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;
            }
        });
    });

 

最后提供打包下载地址:http://lijian.net/p/windsformvalid/windsformvalidv1.0.zip

添加新评论 »