bootstrap教程|bootstrap与jQuery.validate表单校验的例子

更新时间：2020-03-12 来源：jquery 手机版 字体：大中小

【www.bbyears.com--jquery】

谈谈表单校验

这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。

IT分享clip_image001 用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：

1.正则表达式的基本了解

其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。

2.ajax异步请求

在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。

3.一些方便的验证库，比如jQuery.validate

正因为如此普遍的需求和一定的复杂性，Bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。

下面就是我用bootstrap+jQuery.validate做的界面：

IT分享clip_image002
bootstrap3基本表单和水平表单
基本表单

基本的表单结构是 Bootstrap 自带的，下面列出了创建基本表单的步骤：

向父元素

添加 role="form"。

把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。

向所有的文本元素、

和 <select> 添加 class .form-control。<br/><br/><form role="form"><br/>   <br/>      <label for="name">名称</label><br/>      <input type="text" class="form-control" id="name" <br/>         placeholder="请输入名称"><br/>   <br/></form><br/>效果如下：<br/><br/><img  title="clip_image003" alt="IT分享clip_image003" src="http://filesimg.111cn.net/php/upload/image/20151020/1445308728135989.png" data-bd-imgshare-binded="1" style="max-width: 100%; height: auto; width: auto; border: 0px; margin: 0px; padding: 0px; display: inline; background-image: none;" height="72" border="0" width="653"/></p><p>水平表单<br/><br/>在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。<br/><br/>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。<br/><br/>响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。<br/><br/><img  title="clip_image004" alt="IT分享clip_image004" src="http://filesimg.111cn.net/php/upload/image/20151020/1445308738100393.png" data-bd-imgshare-binded="1" style="max-width: 100%; height: auto; width: auto; border: 0px; margin: 0px; padding: 0px; display: inline; background-image: none;" height="218" border="0" width="916"/>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：<br/><br/>向父 <form> 元素添加 class .form-horizontal。<br/><br/>把标签和控件放在一个带有 class .form-group 的  中。<br/><br/>向标签添加 class .control-label。<br/><br/><form class="form-horizontal" role="form"><br/>   <br/>      <label for="firstname" class="col-sm-2 control-label">名字</label><br/>      <br/>         <input type="text" class="form-control" id="firstname" <br/>            placeholder="请输入名字"><br/>      <br/>   <br/></form><br/>效果如下：<br/><br/><img  title="clip_image005" alt="IT分享clip_image005" src="http://filesimg.111cn.net/php/upload/image/20151020/1445308747135812.png" data-bd-imgshare-binded="1" style="max-width: 100%; height: auto; width: auto; border: 0px; margin: 0px; padding: 0px; display: inline; background-image: none;" height="51" border="0" width="710"/></p><p>jQuery.validate 自定义校验方法<br/><br/>自定义校验方法<br/><br/><br/>// 手机号码验证<br/>jQuery.validator.addMethod("isPhone", function(value, element) {<br/>    var length = value.length;<br/>    return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));<br/>}, "请正确填写您的手机号码。");<br/><br/>调用自定义校验<br/><br/><img  alt="1.jpg" src="http://filesimg.111cn.net/php/upload/image/20151020/1445308766341629.jpg" title="1445308766341629.jpg"/><br/>rules : {<br/>    phone : {<br/>            required : true,<br/>            isPhone : true<br/>        }<br/>}<br/><br/>自定义错误显示 <br/><br/><br/><br/>register.html<br/><br/><br/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br/><html><br/><head><br/><title>注册</title><br/><meta http-equiv="pragma" content="no-cache"><br/><meta http-equiv="cache-control" content="no-cache"><br/><meta http-equiv="expires" content="0"><br/><link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"><br/><script src="jslib/<a href="http://www.bbyears.com/clist-108-1.html" target="_blank" class="keylink">jquery</a>-1.9.1.min.js" type="text/javascript"></script><br/><script src="scripts/form.js" type="text/javascript"></script><br/><script src="jslib/jQuery.validate/<a href="http://www.bbyears.com/clist-108-1.html" target="_blank" class="keylink">jquery</a>.validate.js" type="text/javascript"></script><br/><script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script><br/><style type="text/css"><br/>#register-form{<br/>    border: 1px solid rgb(197, 197, 197);<br/>    width: 1000px;<br/>    margin: auto;<br/>    border-image: none;<br/>    padding: 30px;<br/>    border-radius: 3px;<br/>}<br/></style><br/></head><br/><body><br/>    <h1 class="text-center text-danger">用户注册</h1><br><br/>    <form id="register-form" role="form" class="form-horizontal" method="get"><br/>        <br/>            <label class="col-sm-2 control-label" for="firstname">用户名：</label><br/>            <br/>                <input class="form-control" id="firstname" name="firstname" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="pass<a href="http://www.bbyears.com/clist-116-1.html" target="_blank" class="keylink">word</a>">密码：</label><br/>            <br/>                <input class="form-control" id="pass<a href="http://www.bbyears.com/clist-116-1.html" target="_blank" class="keylink">word</a>" name="password" type="password" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label><br/>            <br/>                <input class="form-control" id="confirm_password" name="confirm_password" type="password" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="email">E-Mail：</label><br/>            <br/>                <input class="form-control" id="email" name="email" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="phone">手机号码：</label><br/>            <br/>                <input class="form-control" id="phone" name="phone" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="tel">固定电话：</label><br/>            <br/>                <input class="form-control" id="tel" name="tel" /><br/>            <br/>        <br/>        <br/>            <label class="col-sm-2 control-label" for="address">家庭住址：</label><br/>            <br/>                <input class="form-control" id="address" name="address" /><br/>            <br/>        <br/>        <br/>            <br/>                <button type="submit" class="btn btn-primary btn-sm">注册</button><br/>                <button type="reset" class="btn btn-primary btn-sm">重置</button><br/>            <br/>        <br/>    </form><br/></body><br/></html><br/><br/><br/>form.js<br/><br/><br/>$(document).ready(function() {<br/>    // 手机号码验证<br/>    jQuery.validator.addMethod("isPhone", function(value, element) {<br/>        var length = value.length;<br/>        return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));<br/>    }, "请正确填写您的手机号码。");<br/>    // 电话号码验证<br/>    jQuery.validator.addMethod("isTel", function(value, element) {<br/>        var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位<br/>        return this.optional(element) || (tel.test(value));<br/>    }, "请正确填写您的电话号码。");<br/>    // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。<br/>    jQuery.validator.addMethod("isPwd", function(value, element) {<br/>        var str = value;<br/>        if (str.length < 6 || str.length > 18)<br/>            return false;<br/>        if (!/^[a-zA-Z]/.test(str))<br/>            return false;<br/>        if (!/[0-9]/.test(str))<br/>            return fasle;<br/>        return this.optional(element) || /[^A-Za-z0-9]/.test(str);<br/>    }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");<br/>    $("#register-form").validate({<br/>        errorElement : 'span',<br/>        errorClass : 'help-block',<br/>        rules : {<br/>            firstname : "required",<br/>            email : {<br/>                required : true,<br/>                email : true<br/>            },<br/>            password : {<br/>                required : true,<br/>                isPwd : true<br/>            },<br/>            confirm_password : {<br/>                required : true,<br/>                isPwd : true,<br/>                equalTo : "#password"<br/>            },<br/>            phone : {<br/>                required : true,<br/>                isPhone : true<br/>            },<br/>            tel : {<br/>                isTel : true<br/>            },<br/>            address : {<br/>                minlength : 10<br/>            }<br/>        },<br/>        messages : {<br/>            firstname : "请输入姓名",<br/>            email : {<br/>                required : "请输入Email地址",<br/>                email : "请输入正确的email地址"<br/>            },<br/>            password : {<br/>                required : "请输入密码",<br/>                minlength : jQuery.format("密码不能小于{0}个字 符")<br/>            },<br/>            confirm_password : {<br/>                required : "请输入确认密码",<br/>                minlength : "确认密码不能小于5个字符",<br/>                equalTo : "两次输入密码不一致不一致"<br/>            },<br/>            phone : {<br/>                required : "请输入手机号码"<br/>            },<br/>            tel : {<br/>                required : "请输入座机号码"<br/>            },<br/>            address : {<br/>                required : "请输入家庭地址",<br/>                minlength : jQuery.format("家庭地址不能少于{0}个字符")<br/>            }<br/>        },<br/>        //自定义错误消息放到哪里<br/>        errorPlacement : function(error, element) {<br/>            element.next().remove();//删除显示图标<br/>            element.after('');<br/>            element.closest('.form-group').append(error);//显示错误消息提示<br/>        },<br/>        //给未通过验证的元素进行处理<br/>        highlight : function(element) {<br/>            $(element).closest('.form-group').addClass('has-error has-feedback');<br/>        },<br/>        //验证通过的处理<br/>        success : function(label) {<br/>            var el=label.closest('.form-group').find("input");<br/>            el.next().remove();//与errorPlacement相似<br/>            el.after('');<br/>            label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");<br/>            label.remove();<br/>        },<br/>    });<br/>});</p></form><p>本文来源：<a href="http://www.bbyears.com/wangyezhizuo/86573.html">http://www.bbyears.com/wangyezhizuo/86573.html</a></p> 
                    <script type="text/javascript">
                        s3();
                    </script>
               </div>
                <div class="art-page">
                    <a href='http://www.bbyears.com/wangyezhizuo/86491.html' title="angularjs1.6_Angular">上一篇</a>                    
                    <a href='http://www.bbyears.com/wangyezhizuo/86659.html' title='[jquery ajax]jQuery '>下一篇</a>
                </div>
                <ul class="art-pernext">                    
                    <li class="copy">
                    	链接：<a href="http://www.bbyears.com/wangyezhizuo/86573.html">http://www.bbyears.com/wangyezhizuo/86573.html</a><br/>
                        <a href="http://www.bbyears.com/wangyezhizuo/86573.html" title="">bootstrap教程|bootstrap与jQuery.validate表单校验的例子</a>(转载时请注明本文出处及链接)                        
                    </li>
                </ul>
                		
                <div class="art-interest">
                    <div class="w640 l">
                        <h3>猜你感兴趣</h3>
                        <div class="bdsharebuttonbox" data-tag="bdshare">
                            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="bds_bdysc" data-cmd="bdysc" title="分享到百度云收藏"></a>
                            <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                        </div>
                        <script>
                            window._bd_share_config = {
                                share: [{
                                    "tag": "bdshare",
                                    "bdStyle": "1",
                                    "bdSize": 24
                                }]
                            };
                            with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];
                        </script>
                    </div>
                    <ul>
                    	                                                <li>
                            <a href="http://www.bbyears.com/shoujikaifa/86572.html" title="[ios11.4.1]iOS 9.0.2系统有哪些bug?iOS 9.0.2又出三大bug汇总">[ios11.4.1]iOS 9.0.2系统有哪些bug?iOS 9.0.2又出三大bug汇总</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/shoujikaifa/86571.html" title="【魅族路由器mini怎么设置魅族路由器mini设置密码】魅族路由器mini怎么设置?魅族路由器mini设置图解">【魅族路由器mini怎么设置魅族路由器mini设置密码】魅族路由器mini怎么设置?魅族路由器mini设置图解</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/ps/86570.html" title="photoshop滤镜教程|photoshop滤镜制作复古波卡尔点效果图">photoshop滤镜教程|photoshop滤镜制作复古波卡尔点效果图</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/caozuoxitong/86569.html" title="【linux中shell是什么】linux中shell awk 检查程序是否执行">【linux中shell是什么】linux中shell awk 检查程序是否执行</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/shoujikaifa/86568.html" title="【迈克尔约翰逊】约翰逊的名言警句">【迈克尔约翰逊】约翰逊的名言警句</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/caozuoxitong/86567.html" title="win10系统点击关机却自动重启怎么解决|win10系统点击关机却自动重启怎么办">win10系统点击关机却自动重启怎么解决|win10系统点击关机却自动重启怎么办</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/wangyetexiao/86566.html" title="[win7旗舰版电脑提示无法加入域提示找不到]win7旗舰版电脑提示无法加入域，提示“找不到网络路径”处理办法">[win7旗舰版电脑提示无法加入域提示找不到]win7旗舰版电脑提示无法加入域，提示“找不到网络路径”处理办法</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/shoujikaifa/86565.html" title="【微信小冰怎么打开】微软微信小冰修改昵称的图文教程">【微信小冰怎么打开】微软微信小冰修改昵称的图文教程</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/asp/86564.html" title="【autocompletetextview 使用】AutoCompleteTextView实现简单的输入提示功能">【autocompletetextview 使用】AutoCompleteTextView实现简单的输入提示功能</a>
                            <em>2020-03-12</em>
                        </li>
                                                <li>
                            <a href="http://www.bbyears.com/zhufuduanxin/86563.html" title="[德谟克利特斯原子理论]德谟克利特名言名句大全">[德谟克利特斯原子理论]德谟克利特名言名句大全</a>
                            <em>2020-03-12</em>
                        </li>
                                                                    </ul>
                </div>
                <script type="text/javascript">
                    s4();
                </script>
            </div>
            <div class="w300 r" id="main-right">
                <div class="main-warp">
                    <div class="main-tit">
                        <h3>热门标签</h3>
                        <a class="main-more" href="/tags">更多>></a>
                    </div>
                    <div class="right-tag">
                    																			                        <a target="_blank" href="/k/bootstrapmianshiti/" title="bootstrap面试题">bootstrap面试题</a>
                        						                    </div>
                    <script type="text/javascript">
                        s7();
                    </script>
                    <div class="main-tit">
                        <h3>本类排行</h3>
                    </div>
                    <ul class="right-hot mt5">
                    	                                                                        <li>
                            <code class="c1">1</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/74645.html" title="【jquery中offset方法使用方法】jquery中offset()方法使用示例">【jquery中offset方法使用方法】jquery中offset()方法使用示例</a>
                        </li>
                                                                        <li>
                            <code class="c2">2</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/56071.html" title="echarts官网_echarts 单击和双击实现程序代码">echarts官网_echarts 单击和双击实现程序代码</a>
                        </li>
                                                                        <li>
                            <code class="c3">3</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/28133.html" title="[jquery ajax]jquery 匿名函数详细教程">[jquery ajax]jquery 匿名函数详细教程</a>
                        </li>
                                                                        <li>
                            <code class="c4">4</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/79882.html" title="【jquery插件库】jquery页面打印插件PrintArea.js使用方法">【jquery插件库】jquery页面打印插件PrintArea.js使用方法</a>
                        </li>
                                                                        <li>
                            <code class="c5">5</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/40299.html" title="【jquery ajax】jquery attr和removeAttr获取和设置元素属性">【jquery ajax】jquery attr和removeAttr获取和设置元素属性</a>
                        </li>
                                                                        <li>
                            <code class="c6">6</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/64002.html" title="【jquery iframe】Jquery获取iframe中对象的多种方法总结">【jquery iframe】Jquery获取iframe中对象的多种方法总结</a>
                        </li>
                                                                        <li>
                            <code class="c7">7</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/28753.html" title="[jquery ajax]jquery 获取radio属性值方法">[jquery ajax]jquery 获取radio属性值方法</a>
                        </li>
                                                                        <li>
                            <code class="c8">8</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/46581.html" title="【jquery eq】jQuery中eq设置radio值实例">【jquery eq】jQuery中eq设置radio值实例</a>
                        </li>
                                                                        <li>
                            <code class="c9">9</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/68442.html" title="【jquery弹出提示框】jQuery弹出信息插件WebUI Popover使用教程">【jquery弹出提示框】jQuery弹出信息插件WebUI Popover使用教程</a>
                        </li>
                                                                        <li>
                            <code class="c10">10</code>
                            <a href="http://www.bbyears.com/wangyezhizuo/44079.html" title="【jquery ajax】jQuery map()方法使用说明">【jquery ajax】jQuery map()方法使用说明</a>
                        </li>
                                                                    </ul>
                    <div class="w300" id="fixed-right">
                        <script type="text/javascript">
                            s8();
                        </script>
                        <div class="main-tit">
                            <h3>本类最新</h3>
                            <a class="main-more" href="http://www.bbyears.com/clist-108-1.html">更多>></a>
                        </div>
                        <ul class="right-new mt5">
                        	                        	                            <li><a href="http://www.bbyears.com/wangyezhizuo/150868.html" title="jquery实现模糊查询|jQuery实现模糊查询的方法分析">jquery实现模糊查询|jQuery实现模糊查询的方法分析</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150835.html" title="jquery简单实现的html页面文本编辑器|jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例">jquery简单实现的html页面文本编辑器|jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150765.html" title="angularjs实现的购物车|angularjs实现的购物金额计算工具示例">angularjs实现的购物车|angularjs实现的购物金额计算工具示例</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150644.html" title="js跨域解决方案|详解js跨域请求的两种方式，支持post请求">js跨域解决方案|详解js跨域请求的两种方式，支持post请求</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150625.html" title="【基于jquery】基于jQuery.i18n实现web前端的国际化">【基于jquery】基于jQuery.i18n实现web前端的国际化</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150042.html" title="[jquery滚动条美化插件]jQuery滚动条美化插件nicescroll简单用法示例">[jquery滚动条美化插件]jQuery滚动条美化插件nicescroll简单用法示例</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/150038.html" title="【jquery选择器】jQuery实现的两种简单弹窗效果示例">【jquery选择器】jQuery实现的两种简单弹窗效果示例</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/149681.html" title="[jquery实现文件编码成base64]jQuery实现文件编码成base64并通过AJAX上传的方法">[jquery实现文件编码成base64]jQuery实现文件编码成base64并通过AJAX上传的方法</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/149375.html" title="[jquery选择器有几种]jQuery中复合选择器简单用法示例">[jquery选择器有几种]jQuery中复合选择器简单用法示例</a></li>
                                                        <li><a href="http://www.bbyears.com/wangyezhizuo/149145.html" title="jquery选择器|jQuery实现新闻播报滚动及淡入淡出效果示例">jquery选择器|jQuery实现新闻播报滚动及淡入淡出效果示例</a></li>
                                                    	                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="footer">
            <div class="w1000">                
                <p>本网站版权归作者所有，如果无意之中侵犯了您的版权，请邮件告知或通知网站客服，本站将在3个工作日内删除。</p>
                <p>
                    Copyright © 2007-2019 程序开发教程网 All rights reserved.
                    <a href="/" title="程序开发教程网">程序开发教程网</a>
                    <a href="http://www.miitbeian.gov.cn" target="_blank" rel="nofollow">京ICP备17136666号</a> <script type="text/javascript">tj();</script>
                </p>
            </div>
        </div>
        <div class="sidetop">
            <ul>
                <li class="backtop"><a id="backtop" href="javascript:;"></a></li>
            </ul>
        </div>
        <script src="/statics/js/js_yxfw/jquery.min.js"></script>
        <script src="/statics/js/js_yxfw/common.js"></script>
        <script language="JavaScript" src="http://www.bbyears.com/api.php?op=count&id=86573&modelid=1"></script>
   </body>
</html>