js校验表单插件

本demo使用jQuery，也可以去掉（需要改写里面用的jQuery的方法）。
demo github地址：[https://github.com/graceup/gu_js_lib/tree/master/基于jQuery js检验插件](https://github.com/graceup/gu_js_lib/tree/master/%e5%9f%ba%e4%ba%8ejQuery js%e6%a3%80%e9%aa%8c%e6%8f%92%e4%bb%b6)

插件源代码

 /**
 * 基于jQuery js 检验插件
 */
GuValidate = new function() {

    function getFormValue($elem){
        var type = $elem.attr("type") || $(this)[0].tagName;

        if(type == "radio"){
            if($elem.is(":checked")){
                return $elem.val();
            }
        } else if(type == "checkbox"){
            if($elem.is(":checked")){
                return $elem.val();
            }
        } else if(type == "ui-rating") {
            return $elem.rating("getValue");

        } else if(type == "ui-switch") {
            return $elem.uiswitch("getValue");

        } else if(type == "dropdown-tree") {
            return $elem.dropdowntree("getSelectIds");
        } else if(type == "filtertag") {
            return $elem.filtertag("getSelectFilter");
        } else {
            return $elem.val();
        }
        return null;
    }
    /**
     * 传进来一个form对象,将这个form对象的元素转成一个bean,如果包含属性ui-ignore则忽略该表单项
     */
    this.formToBean = function($form){

        var bean = {};

        $form.find("input, select, textarea, .ui-rating, .ui-switch, .dropdown-tree, .filtertag").each(function(){
            if($(this).is("[ui-ignore]")){
                return ;
            }
            var name = $(this).attr("name");
            var type = $(this).attr("type") || $(this)[0].tagName;

            if(type == "button" || type == "reset" || type == "submit"){
                return ;
            }

            var value = getFormValue($(this));

            if(value != null){
                if(typeof value == 'string'){
                    value = $.trim(value);
                }
                if(type == 'checkbox'){
                    if(bean[name]){
                        bean[name] = value;
                    } else {
                        bean[name] += ',' + value;
                    }
                } else {
                    bean[name] = value;
                }
            }
        });

        return bean;
    };


    /**
     * 绑定表单
     */
    this.bindForm = function($form, formData) {

        var checkedValue = 1;

        $form.find("input,textarea,select,.ui-rating,.ui-switch,.dropdown-tree,.filtertag,img").each(function(){
            var name = $(this).attr("name");
            var type = $(this).attr("type") || $(this)[0].tagName;
            if(type == "button" || type == "reset" || type == "submit" || name == ''){
                return ;
            }

            if(formData[name] == undefined || formData[name] == null){
                return ;
                //formData[name] = '';
            }

            if(type == "radio"){
                if($(this).val() == formData[name]){
                    $(this).prop("checked", true);
                }
            } else if(type == "checkbox"){
                if(checkedValue == formData[name]){
                    $(this).prop("checked", true);
                }
            } else if(type == "ui-rating") {
                $(this).rating("setValue", formData[name]);

            } else if(type == "ui-switch") {
                $(this).uiswitch("setValue", formData[name]);

            } else if(type == "dropdown-tree") {
                //to be implement
            } else if(type == "filtertag") {

            } else if(type == 'img'){

                $(this).attr("src", formData[name]);

            } else if($(this).hasClass("select2-offscreen")) {
                $(this).select2("data", formData[name]);
            } else {
                $(this).val(formData[name]);
            }
        });

    };

    var validatePatterns = { 
        "required":     [/^[\S+\s*\S+]+$/ig, "不能为空！"],
        "integer":      [/^\d+$/, "必须为整数！"],   
        "numeric":      [/^\d+(\.\d+)?$/, "不是合法的数字！"],
        "currency":     [/^\d+\.\d{1,2}$/, "不是合法的货币数字！"],
        "email":        [/^\w+@\w+(\.\w+)*$/, "不合法email输入！"],
        "phone":        [/^[\d|-]+$/, "不合法phone输入！"],
        "mustChecked":  [/0+/g, "checkbox不能为空！"],
        "mustSelected": [/0+/g, "select不能为空！"],
        "ipAddress":    [/^([1-9]|[1-9]\d|1\d{2}|2[0-1]\d|22[0-3])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/, "不是有效的IP地址！"],
        "netport":      [/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, "不合法端口！"],
        "mac":          [/^[0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}[-][0-9,a-f,A-F]{2}$/, "不合法mac地址！"], 
        "year":         [/^(\d{4})$/, "不合法年！"],
        "mouth":        [/^(\d{4})-(0\d{1}|1[0-2])$/, "不合法月！"],
        "date":         [/^{\d}{4}\-{\d}{2}\-{\d}{2}$/, "不合法日！"],
        "timeHour":     [/^(0\d{1}|1\d{1}|2[0-3])$/, "不合法时！"],  //HH
        "timeMinute":   [/^(0\d{1}|1\d{1}|2[0-3]):([0-5]\d{1})$/, "不合法分！"], //HH:mm
        "timeSeconds":  [/^(0\d{1}|1\d{1}|2[0-3]):[0-5]\d{1}:([0-5]\d{1})$/, "不合法时间！"], //HH:mm:ss
        "chineseOnly":  [/[^\u4E00-\u9FA5]/g, "输入不合法！请只输入中文！"],
        "mobilePhone":  [/^1[\d]{10}$/, "不合法手机号！"],
        //"unicomPhone":  [/^13[0-4]{1}[\d]{8}$/, "不合法！"],
        //"telecomPhone": [/^(\d{7,8})|(\d{3,4}\-\d{7,8})$/, "不合法！"],
        "specials":     [/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>?]{1}[^`~!@$%^&+=\\\][\{\}:;'\,<>?]{0,}$/, "不能输入特殊字符！"],
        "all":          [/^/,""],
        "pattern":      [null, "数据不合法！请确认"]
    };

    /**
     * 表单验证
     * ui-validate 属性， minlength, maxlength
     */
    this.validateForm = function($form){

        var checkAll = true;
        $form.find("[ui-validate]").each(function(){
            var validate = $(this).attr("ui-validate");

            var pattern = $(this).attr('ui-pattern');

            var objectReg = new RegExp(/\{.*\}/g);

            var name = $(this).attr("name");

            var vtext = $(this).attr("ui-vtext");

            var type = $(this).attr("type") || $(this)[0].tagName;

            if(vtext == undefined || vtext == null || vtext == ''){
                vtext = name;
            }

            var value = $.trim(getFormValue($(this)));

            function getPattern(p){
                var reg = null;
                p = $.trim(p);
                if(p == "pattern") {
                    reg = [eval("/" + pattern + "/i"), validatePatterns["pattern"][1] ];
                } else {
                    reg = validatePatterns[p];  
                }
                if(reg == null) {

                    var msg = "[" + vtext + "]验证Pattern配置错误：" + p;
                    alert(msg, 'warn');

                    throw new Error(msg);
                }
                return reg;
            }

            var pats = null;
            var allPatterns = '';

            if(objectReg.test(validate)){
                validate = eval("(" + validate + ")");

                if(validate.minlength && !isNaN(validate.minlength)){
                    if(value.length < validate.minlength){
                        alert("[" + vtext + "]不能少于" + validate.minlength + "个字符！", "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }

                if(validate.maxlength && !isNaN(validate.maxlength)){
                    if(value.length > validate.maxlength){
                        alert("[" + vtext + "]不能超过" + validate.maxlength + "个字符！", "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }

                pats = validate.pattern.split(",");

                allPatterns = validate.pattern;

            } else {
                pats = validate.split(",");

                allPatterns = validate;
            }

            if(allPatterns != null && allPatterns.indexOf("required") >= 0 || value != '') {
                for(var i = 0; i < pats.length; i++){

                    var reg = getPattern(pats[i]);
                    if(!value.match(reg[0]) || (value.match(reg[0])==-1) && type =="SELECT"){
                        var vinfo = $(this).attr("ui-vinfo");
                        if(vinfo == undefined || vinfo == null || vinfo == ''){
                            vinfo = "[" + vtext + "]" + reg[1];
                        }
                        alert(vinfo, "warn");
                        $(this).focus();
                        checkAll = false;
                        return false;
                    }
                }
            }

        });

        return checkAll;
    };


};

demo

htm页面(js比较少，直接写到页面了)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>定制基于jQuery js检验插件</title>

</head>
<body>

    <div id="form">
        <p>
            <span>姓名</span> <input type="text"
                ui-validate="{pattern:'required',maxlength: 50}"
                ui-vtext="姓名"  name="username"><font
                color="red"> *</font>
        </p>
        <p>
            <span>邮箱</span> <input type="text"
                ui-validate="{pattern:'email,required',maxlength: 50}" ui-vtext="邮箱"
              name="email"><font color="red"> *</font>
        </p>
        <p>
            <span>ip</span> <input type="text"
                ui-validate="{pattern:'ipAddress,required'}" ui-vtext="ip"
                 name="ip"><font color="red"> *</font>
        </p>
        <p>
            <span>留言</span>
            <textarea rows="5" placeholder="请在此留言" type="text"
                ui-validate="{pattern:'all',maxlength: 250}"
                ui-vtext="留言"  name="content"></textarea>
            <font color="red"> *</font>
        </p>

        <p>
            <button onclick="getForm()">getForm</button>
        </p>
    </div>

    <script type="text/javascript"
        src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="ui-validate.js"></script>

    <script type="text/javascript">
        function getForm() {
            if (!GuValidate.validateForm($('#form'))) {
                return;
            }else{
                alert('检验通过');
            }

            var data = GuValidate.formToBean($('#form'));
            console.log(data);

        }
    </script>

</body>
</html>