表单验证 bootstrap- validate.js

来源：互联网发布：php过滤数组重复数据编辑：程序博客网时间：2024/05/10 01:39

验证表单内容bootstrap-validate.js

由于第一次写博客，并且属于技术小白，不足之处请大神指点：

支持扩展的表单验证

html代码

@requires_authorization<!DOCTYPE html><html>    <head>        <title>test.html</title>        <meta name="keywords" content="keyword1,keyword2,keyword3">        <meta name="description" content="this is my page">        <meta name="content-type" content="text/html; charset=UTF-8">        <script src="js/jquery-1.11.1.min.js"></script>        <script src="js/bootstrap-validate.js"></script>        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    </head>    <body>        <input type="text" class="form-control inputval inputval-isnull" id="specialties_name" placeholder="青海湖">        <input type="text" class="form-control inputval inputval-isnumber" id="specialties_name" placeholder="青海湖1">        <input type="text" class="form-control inputval inputval-isnullandnum" id="specialties_name" placeholder="青海湖2">        <input type="submit" class="valbtn" value="提交" onclick="ajaxsubmit(this)">    </body>    <script>        function ajaxsubmit(evt) {            bootvaildate.submit(evt);            if (bootvaildate.check) {                //验证通过                alert("验证通过");            }else{                alert("验证未通过");            }        }    </script></html>

JS代码

@requires_authorization/** * @author Mao Haifeng <mhfflying@163.com> version: 0.1 */$(function() {    bootvaildate.load();});var bootvaildate={        load:function(){            jQuery.focusblur = function(focusid) {                var focusblurid = $(focusid);                var defval = focusblurid.val();                focusblurid.focus(function() {                    var thisval = $(this).val();                    if (thisval == defval) {                        $(this).val("");                        $(this).attr('placeholder','');                    }                });                focusblurid.blur(function() {                    var thisval = $(this).val();                    var focustype=this.className.split("inputval-");                    bootvaildate.init(this,focustype[1],thisval);                });            };            //按钮点击事件            /*$(".valbtn").click(function(evt){                bootvaildate.check=true;                bootvaildate.submit(evt);            });*/            /* 下面是调用方法 */            $.focusblur(".inputval");        },        init:function(obj,type,thisval){            var reg = new RegExp("^[0-9]*$");              switch(type){            case "isnull":                if (thisval == "") {                    $(obj).val("");                    $(obj).attr('placeholder','不能为空！');                }                break;            case "isnumber":                if(!reg.test(thisval)){                      $(obj).val("");                    $(obj).attr('placeholder','请输入数字！');                }                 break;            case "isnullandnum":                if(!reg.test(thisval)){                      $(obj).val("");                    $(obj).attr('placeholder','请输入数字！');                }else if(thisval == ""){                    $(obj).val("");                    $(obj).attr('placeholder','不能为空！');                }                break;            }        },        submit:function(evt){            bootvaildate.check=true;            var list=$(".inputval");            for(var i=0;i<list.length;i++){                var foctype=list[i].className.split("inputval-");                var value=$(list[i]).val();                //判断输入内容                bootvaildate.init(list[i],foctype[1],value);                var placeholder=$(list[i]).attr('placeholder');                if(placeholder!=""){                    $(list[i]).focus();                    bootvaildate.check=false;                }            }        }    }

附件下载

1 0