JavaScript JQuery输入正则扩展InputVerifyjquery-InputVerify.js

Posted 2021-03-07 unknownregister

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

 

 

 下载地址(●‘?‘●)