前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >windsformvalid-表单验证JQuery插件

windsformvalid-表单验证JQuery插件

作者头像
XiaoA
发布2023-05-24 14:08:09
8180
发布2023-05-24 14:08:09
举报
文章被收录于专栏:偷得浮生半日闲

演示页面:http://lijian.net/p/windsformvalid/

每次表单每个页面提交都要自己写脚本验证信息,老是复制粘贴的很烦,改起来也很麻烦,网上也有大把的表单验证插件,但是感觉用起来不灵活,这就出现了windsformvalid.

使用方法:

1、引用jquery和windsformvalid.js

代码语言:javascript
复制
<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属性给控件增加验证规则,多个规则则用”|”分开,如用户名:

代码语言:javascript
复制
<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属性,如:

代码语言:javascript
复制
<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值

代码语言:javascript
复制
<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, 如:

代码语言:javascript
复制
"callbackvalid": function() {
                if ($('#txtlogin').val() != "stevejobs") {
                    return false;
                }
                return true;
}

6、默认消息

defaultnullmsg:为空时默认消息

defaulterrormsg:验证不通过时默认消息

defaultajaxmsg:ajax验证不通过时默认消息

defaultpassmsg:验证通过时默认消息

defaultcallbackmsg:回调验证未通过时默认消息

7、html页面使用,在ready里面使用,如:

代码语言:javascript
复制
$(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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档