基于BootStrap与jQuery.validate实现表单提交校验功能

向所有的文本元素 、 和 <select> 添加 class .form-control。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> </pre> </div> <p>效果如下：</p> <p ><img src="https://img.php1.cn/3cd4a/1e804/978/b42157c52714609c.png&＃63;2016112291755" alt="" /></p> <p><strong>水平表单</strong></p> <p>在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。</p> <p>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p> <p>响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。</p> <p ><img src="https://img.php1.cn/3cd4a/1e804/978/3cdbbe5169538cfd.png&＃63;2016112291857" alt="" /></p> <p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p> <p>向父 元素添加 <code>class .form-horizontal</code>。</p> <p>把标签和控件放在一个带有 <code>class .form-group 的 <div> </code>中。</p> <p>向标签添加 <code>class .control-label</code>。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> </div> </div> </pre> </div> <p>效果如下：</p> <p ><img src="https://img.php1.cn/3cd4a/1e804/978/6fafd0b99b6bf9db.png&＃63;201611229209" alt="" /></p> <p><span ><strong>jQuery.validate 自定义校验方法</strong></span></p> <p><strong>自定义校验方法</strong></p> <div class="jb51code"> <pre class="brush:js;"> // 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。");</pre> </div> <p><strong>调用自定义校验</strong></p> <div class="jb51code"> <pre class="brush:js;"> rules : { phone : { required : true, isPhone : true } }</pre> </div> <p>自定义错误显示</p> <p> <table cellspacing="0" cellpadding="0" border="1" valign="top" Microsoft YaHei', Verdana, sans-serif; border-left: rgb(163,163,163) 1pt solid; widows: 1; letter-spacing: normal; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-stroke-width: 0px"> <tbody> <tr class="firstRow"> <td > <p ><span ><span ><strong>参数</strong></span></span></p> </td> <td > <p ><span ><span ><strong>类型</strong></span></span></p> </td> <td > <p ><span ><span ><strong>描述</strong></span></span></p> </td> <td > <p ><span ><span ><strong>默认值</strong></span></span></p> </td> </tr> <tr> <td > <p ><span ><span >errorClass</span></span></p> </td> <td > <p ><span ><span >String</span></span></p> </td> <td > <p ><span ><span >指定错误提示的 css 类名，可以自定义错误提示的样式。</span></span></p> </td> <td > <p ><span ><span >"error"</span></span></p> </td> </tr> <tr> <td > <p ><span ><span >errorElement</span></span></p> </td> <td > <p ><span ><span >String</span></span></p> </td> <td > <p ><span ><span >用什么标签标记错误，默认是 label，可以改成 em。</span></span></p> </td> <td > <p ><span ><span >"label"</span></span></p> </td> </tr> <tr> <td > <p ><span ><span >errorPlacement</span></span></p> </td> <td > <p lang="en-US" ><span ><span >function</span></span></p> </td> <td > <p ><span ><span >跟一个函数，可以自定义错误放到哪里。</span></span></p> </td> <td > <p ><span lang="en-US" ><span ><span >input</span></span></span><span lang="zh-CN" ><span ><span >元素之后</span></span></span></p> </td> </tr> <tr> <td > <p ><span ><span >success</span></span></p> </td> <td > <p lang="en-US" ><span ><span > </span></span></p> </td> <td > <p ><span ><span lang="zh-CN" ><span >要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个</span></span><span lang="en-US" ><span ><span class="Apple-converted-space"> </span>css 类，也可跟一个函数。</span></span></span></p> </td> <td > <p ><span ><span >无</span></span></p> </td> </tr> <tr> <td > <p ><span ><span >highlight</span></span></p> </td> <td > <p lang="en-US" ><span ><span >function</span></span></p> </td> <td > <p ><span ><span >可以给未通过验证的元素加效果、闪烁等。</span></span></p> </td> <td > <p ><span ><span >无</span></span></p> </td> </tr> </tbody> </table> </p> <p><strong>register.html</strong></p> <div class="jb51code"> <pre class="brush:js;"> <h1 class="text-center text-danger">用户注册</h1><br> <div class="form-group"> <label class="col-sm-2 control-label" for="firstname">用户名：</label> <div class="col-sm-5"> <input class="form-control" id="firstname" name="firstname" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="password">密码：</label> <div class="col-sm-5"> <input class="form-control" id="password" name="password" type="password" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label> <div class="col-sm-5"> <input class="form-control" id="confirm_password" name="confirm_password" type="password" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="email">E-Mail：</label> <div class="col-sm-5"> <input class="form-control" id="email" name="email" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="phone">手机号码：</label> <div class="col-sm-5"> <input class="form-control" id="phone" name="phone" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="tel">固定电话：</label> <div class="col-sm-5"> <input class="form-control" id="tel" name="tel" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="address">家庭住址：</label> <div class="col-sm-5"> <input class="form-control" id="address" name="address" /> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-primary btn-sm">注册</button> <button type="reset" class="btn btn-primary btn-sm">重置</button> </div> </div> </pre> </div> <p><strong>form.js</strong></p> <div class="jb51code"> <pre class="brush:js;"> $(document).ready(function() { // 手机号码验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^(\d{3,4}-)&＃63;\d{7,8}$/g; // 区号－3、4位 号码－7、8位 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码。"); // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。 jQuery.validator.addMethod("isPwd", function(value, element) { var str = value; if (str.length <6 || str.length > 18) return false; if (!/^[a-zA-Z]/.test(str)) return false; if (!/[0-9]/.test(str)) return fasle; return this.optional(element) || /[^A-Za-z0-9]/.test(str); }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。"); $("#register-form").validate({ errorElement : 'span', errorClass : 'help-block', rules : { firstname : "required", email : { required : true, email : true }, password : { required : true, isPwd : true }, confirm_password : { required : true, isPwd : true, equalTo : "#password" }, phone : { required : true, isPhone : true }, tel : { isTel : true }, address : { minlength : 10 } }, messages : { firstname : "请输入姓名", email : { required : "请输入Email地址", email : "请输入正确的email地址" }, password : { required : "请输入密码", minlength : jQuery.format("密码不能小于{0}个字 符") }, confirm_password : { required : "请输入确认密码", minlength : "确认密码不能小于5个字符", equalTo : "两次输入密码不一致不一致" }, phone : { required : "请输入手机号码" }, tel : { required : "请输入座机号码" }, address : { required : "请输入家庭地址", minlength : jQuery.format("家庭地址不能少于{0}个字符") } }, //自定义错误消息放到哪里 errorPlacement : function(error, element) { element.next().remove();//删除显示图标 element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>'); element.closest('.form-group').append(error);//显示错误消息提示 }, //给未通过验证的元素进行处理 highlight : function(element) { $(element).closest('.form-group').addClass('has-error has-feedback'); }, //验证通过的处理 success : function(label) { var el=label.closest('.form-group').find("input"); el.next().remove();//与errorPlacement相似 el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'); label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success"); label.remove(); }, }); });</pre> </div> <p>以上所述是小编给大家介绍的基于BootStrap与jQuery.validate实现表单提交校验功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！</p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/bootstrap" target="_blank" title="bootstrap">bootstrap</a></li> <li><a href="https://www.php1.cn/tag/jquery" target="_blank" title="jquery">jquery</a></li> <li><a href="https://www.php1.cn/tag/正则" target="_blank" title="正则">正则</a></li> <li><a href="https://www.php1.cn/tag/ajax" target="_blank" title="ajax">ajax</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了