首頁 > 文章 > web前端 > 基於Bootstrap+jQuery.validate實作表單驗證

基於Bootstrap+jQuery.validate實作表單驗證

高洛峰原創: 2017-01-03 17:36:321281瀏覽

這大概是一種慣例，學習前台後台最開始接觸的業務都是用戶註冊和登入。現在社會堅持以人為本的理念，在網站開發過程中也是如此。 User是我們面對較多的對象，也是較核心的對象。最開始的用戶註冊和登陸這塊，也就特別重要。

用戶註冊和登入其實往往比我們想像的難。就例如表單校驗，裡面涵蓋的內容其實挺多，就前台而言，你需要了解：

1.正則表達式的基本了解

其實正則並不難，並且在學會後能帶給你極大的成就感，享受那種事半功倍的效果吧。

2.ajax非同步請求

在驗證使用者名稱是否存在、使用者登入時帳號或密碼錯誤時給予對應的提示。

3.一些方便的驗證庫，例如jQuery.validate

正因為如此普遍的需求和一定的複雜性，bootstrap表單和jQuery.validate表單校驗等一些優秀的類庫專為人們解決UI、表單校驗問題。

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

基於Bootstrap+jQuery.validate實作表單驗證

一、bootstrap3基本表單和水平表單

列出了建立基本表單的步驟：

向父元素

新增role="form"。
把標籤和控制項放在一個有 class .form-group 的

中。這是獲取最佳間距所必需的。
為所有的文字元素、

和 <select> 加入 class .form-control。 <pre class="brush:js;toolbar:false"><form role="form">
 <div class="form-group">
  <label for="name">名称</label>
  <input type="text" class="form-control" id="name"
   placeholder="请输入名称">
 </div>
</form></pre><p>效果如下：</p>
<p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="基於Bootstrap+jQuery.validate實作表單驗證"></p>
<p>2、水平表單</p>
<p>在了解水平表單之間，我們應該對bootstrap的網格系統有所了解。 </p>
<p>Bootstrap 包含了一個響應式的、行動裝置優先的、不固定的網格系統，可以隨著裝置或視窗大小的增加而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。 </p>
<p>響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列,也就是說它是以百分比定義寬度的。 </p>
<p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="基於Bootstrap+jQuery.validate實作表單驗證" alt="基於Bootstrap+jQuery.validate實作表單驗證"    style="max-width:90%"  style="max-width:90%"></p>
<p>水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需建立一個水平版面的表單，請依照下面的步驟進行：</p>
<p>步驟1：為父 </p>
<form> 元素新增 class .form-horizontal。 <br>步驟2：把標籤和控制項放在一個有 class .form-group 的 <div> 中。 <br>步驟3：向標籤新增 class .control-label。 <pre class="brush:js;toolbar:false"><form class="form-horizontal" role="form">
 <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>
</form></pre><p>效果如下：</p>
<p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="基於Bootstrap+jQuery.validate實作表單驗證" alt="基於Bootstrap+jQuery.validate實作表單驗證"    style="max-width:90%"  style="max-width:90%"></p>
<p>二、jQuery.validate 自訂校驗方法</p>
<p>1、自訂校驗方法</p><pre class="brush:js;toolbar:false">// 手机号码验证
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> <p></p> <p>3、自訂錯誤顯示</p>
<p></p>
<p></p>三、register.html<p><pre class="brush:js;toolbar:false">rules : {
 phone : {
   required : true,
   isPhone : true
  }
}</pre></p>四、form.js<p><pre class="brush:html;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
  
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
 border: 1px solid rgb(197, 197, 197);
 width: 1000px;
 margin: auto;
 border-image: none;
 padding: 30px;
 border-radius: 3px;
}
</style>
  
</head>
<body>
 <h1 class="text-center text-danger">用户注册</h1><br>
 <form id="register-form" role="form" class="form-horizontal" method="get">
  <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>
 </form>
</body>
</html></pre></p>以上就是Bootstrap+jQuery.validate實現表單驗證相關知識的表單驗證。 <p><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="基於Bootstrap+jQuery.validate實作表單驗證" alt="基於Bootstrap+jQuery.validate實作表單驗證"    style="max-width:90%"  style="max-width:90%">更多基於Bootstrap+jQuery.validate實作表單驗證相關文章請關注PHP中文網！ </p>
</div>
</form></select>

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Vue.js每天必學之組件與組件間的通信下一篇：Vue.js每天必學之組件與組件間的通信

看更多