码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2020-03-06 12:59:39      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:参数   ISE   new   click   mail   sem   说明   chinese   pre   

正则表达式的工具类,目前包括文本长度、手机号、邮箱、特殊字符、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,其它情况不存在。

 

 

 下载地址(●‘?‘●)

 

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

标签:参数   ISE   new   click   mail   sem   说明   chinese   pre   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!