JavaScript JQuery输入正则扩展InputVerify【jquery-InputVerify.js】

正则表达式的工具类,目前包括文本长度、手机号、邮箱、特殊字符、html标签、url地址格式、中文、英文、为空、数字,提供了jquery和Dom的使用方式,依赖于jquery

有三种使用方式,分别为标签、jQuery和Dom



标签需要为标签添加verify和onverify属性,verify为正则判断配置文本,这个配置为BinVerify的参数,onverify为正则判断回调function名称,在标签使用之前需要使用jQuery内的扩展方法Verify启用:$.Verify();

[注:这里的onverify的内容为回调function的名称并且此function必须在根部Dom对象window中可以查到]

标签原型测试

在回调参数中需要三个参数verify、result、e,参数1为当前判断的配置项,参数2为当前判断的结果,参数3为当前判断的标签

<input id="jQueryAll" verify="length(11);phone" onverify="tagCallBack" />
<script>
    $.Verify();
    function tagCallBack(verify, result, e) {
        if (verify == "length" && result.code == 200) {
            alert("长度验证测试[" + result.ok + "]");
            if (!result.ok) {
                $(e).val($(e).val().substring(0, result.par));
            }
        }
        else if (verify == "phone" && result.code == 200) {
            alert("手机号验证测试[" + result.ok + "]");
            if (!result.ok) {
                $(e).val("");
            }
        }
    }
</script>

jQuery,在jQuery中为jQuery扩展了Verify的方法,只需要一个参数config,这个配置为BinVerify的参数,参数为Array或者String文本,String文本时需要使用";"英文的分号作为分割,配置几个项,返回几个项的数据,配置项长度=1除外,配置项长度=1时返回的是单个对象,多个配置项返回的数据为Array的对象。

jQuery原型测试

返回结果对象时,会在结果对象中添加verify值,该值标识的当前判断的配置项

<input id="jQuerylength" />
<input type="button" οnclick="jQuerylengthClick()" value="测试" />
<script>
    function jQuerylengthClick() {
        var result = $("#jQuerylength").Verify("length(20)");//配置多个项,返回几个项的对象,当配置项为1是则返回一个对象,非数组集合
        if (result.verify == "length" && result.code == 200) {
            alert("长度验证测试[" + result.ok + "]");
            if (!result.ok) {
                $(e).val($(e).val().substring(0, result.par));
            }
        }
    }
</script>

Dom,在标签和jQuery中使用的为以Dom为核心的,开放事件,本身的核为Dom,但是依赖于jQuery中的选择器和事件绑定,在Dom中需要三个参数,分别为selector、config、callBack,selector为选择器,内部存在jQuery的选择器,使用方式多变,config为配置该配置内容为BinVerify的参数,配置几个项,返回几个项的数据,配置项长度=1除外,配置项长度=1时返回的是单个对象,多个配置项返回的数据为Array的对象,callBack为判断回调事件。

[注:改对象只针对jQuery的id选择器做的处理,其他选择器,请根据情况自行修改]

Dom原型测试(1)

在回调参数中需要三个参数verify、result、e,参数1为当前判断的配置项,参数2为当前判断的结果,参数3为当前判断的标签

<input id="Domphone" />
<script>
    new Verify("#Domphone", "length(11);phone", function (verify, result, e) {
        if (verify == "length" && result.code == 200) {
                alert("长度验证测试[" + result.ok + "]");
                if (!result.ok) {
                $(e).val($(e).val().substring(0, result.par));
            }
        }
        else if (verify == "phone" && result.code == 200) {
            alert("手机号验证测试[" + result.ok + "]");
        }
    });
</script>

Dom原型测试(2)

在result返回结果对象时,会在结果对象中添加verify值,该值标识的当前判断的配置项

<input id="Domlength" />
<input type="button" οnclick="DomlengthClick()" value="测试" />
<script>
    var Domlength = new Verify("#Domlength", "length(11)");
    function DomlengthClick() {
        var result = Domlength.result();
        if (result.verify == "length" && result.code == 200) {
            alert("长度验证测试[" + result.ok + "]");
         }
    }
</script>

配置项说明

在配置项中目前只有文本长度【length】、手机号【phone】、邮箱【email】、特殊字符【character】、html标签【tag】、url地址格式【url】、中文【chinese】、英文【english】、为空【isempty】、数字【number】,如果需要其他,请自行扩展。

默认结果对象

return { code: 200, ok: false, par: par };

code为处理状态,默认只存在200和500,200标识处理无异常,500标识出现异常。

[注:code为500时会有msg参数,为中文解释,目前未添加报错处理]

ok为处理结果,为Boolean类型,true:表示通过,false则未通过。

par为配置项内的参数如::length(20),那内容par的内容则为20,其它情况不存在。

下载地址(●‘?‘●)

原文地址:https://www.cnblogs.com/UnknownRegister/p/12425665.html

时间: 2024-10-28 23:52:28

JavaScript JQuery输入正则扩展InputVerify【jquery-InputVerify.js】的相关文章

JS扩展 或 Jquery的扩展写法

<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = 'hello';str.test('world');//helloworld //JQ扩展(function($){ $.fn.test = function(op){ var defaults = {a:'no'} var setings = $.extend(defaults,op); alert(seti

javaScript学习总结(二)——jQuery插件的开发

概要 jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件:http://plugins.jquery.com/ 一.插件开发基础 1.1.$.extend 在jQuery根命名空间下直接调用的方法可以认为是jQuery的静态方法或属性,常常使用方法名来调用,使用.方法名来调用,使用.extend这个静态方法可以完成两个功

jQuery常用正则验证

jQuery常用正则验证  [转] 基础知识:JS中创建正则对象的方式:-使用RegExp()构造函数方式,如:var patten=new RegExp("s$");-使用正则直接量方式,如:var patten=/s$/;注意:就像字符串直接量被定义为包含在引号("")内的字符一样,正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符:斜杠外末尾可以加正则全局标识符. 验证文字输入个数<script type="text/javascript

jquery里正则的使用方法及常用的正则验证

本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手. 假设我们的网页里有这样的一个表单: <input id="aijquery" type="text"> <button id="btn">验证</button> 1.验证用户输入的只能是英文和数字: $("#btn").click(function(){ var $aijquery=$("#ai

jquery输入数字随机抽奖特效

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果展示 http://hovertree.com/texiao/jquery/76/ 效果图如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery自定义数值抽奖活动代码 -

jquery源码解析:jQuery扩展方法extend的详解

jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn.extend扩展的是实例方法. 当只传入一个对象的时候,里面的方法和属性是扩展到this上的.比如: $.extend( { aaa:function(){}, bbb:function(){} } ) ,这里的this是$,所以用这种形式$.aaa()调用. $.fn.extend( { aaa:

javascript的window.onload()方法和jQuery的$(document).ready()的对比

jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 ,后面会覆盖前面的. $

jQuery.extend()、jQuery.fn.extend()扩展方法详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象

打造简易可扩展的jQuery/CSS3 Tab菜单

原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜单比较假单,你也可以用CSS代码定制你自己需要的外观. 我们可以在这里看到这款Tab菜单的DEMO演示. 看完演示,再来解读一下这款Tab菜单的源代码,主要由CSS代码和jQuery代码两块. 先是上简单的HTML代码: <figure class="tabBlock"> &l