bootstrap+jQuery.validate表單校驗

時間  2019-11-09
標籤 bootstrap+jquery.validate bootstrap jquery validate 表單 校驗 欄目 Bootstarp 简体版
原文   原文鏈接

談談表單校驗

這大概是一種慣例，學習前臺後臺最開始接觸的業務都是用戶註冊和登陸。如今社會堅持以人爲本的理念，在網站開發過程一樣如此。User是咱們面對較多的對象，也是較核心的對象。最開始的用戶註冊和登錄這塊，也就尤其重要。 javascript

用戶註冊和登陸其實每每比咱們想象的難。就好比表單校驗，裏面涵蓋的內容其實挺多，就前臺而言，你須要瞭解： css

1.正則表達式的基本瞭解 html

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

2.ajax異步請求 jquery

在驗證用戶名是否存在、用戶登陸時帳號或者密碼錯誤時給出相應的提示。 ajax

3.一些方便的驗證庫，好比jQuery.validate 正則表達式

正由於如此廣泛的需求和必定的複雜性，bootstrap表單和jQuery.validate表單校驗等一些優秀的類庫專爲人們解決UI、表單校驗問題。 bootstrap

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

clip_image001

clip_image002

bootstrap3基本表單和水平表單

基本表單 異步

基本的表單結構是 Bootstrap 自帶的，下面列出了建立基本表單的步驟：

  • 向父元素<form> 添加 role="form"。
  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
  • 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form role="form">
   <div class="form-group">
      <label for="name">名稱</label>
      <input type="text" class="form-control" id="name" 
         placeholder="請輸入名稱">
   </div>
</form>

效果以下：

clip_image003

水平表單

在瞭解水平表單之間，咱們應該對bootstrap的網格系統有所瞭解。

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。

響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列,也就是說它是以百分比定義寬度的。

clip_image004

水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

  • 向父 <form> 元素添加 class .form-horizontal。
  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
  • 向標籤添加 class .control-label。
<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>

效果以下：

clip_image005

jQuery.validate 自定義校驗方法

自定義校驗方法

// 手機號碼驗證
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));
}, "請正確填寫您的手機號碼。");

調用自定義校驗

rules : {
    phone : {
            required : true,
            isPhone : true
        }
}

自定義錯誤顯示

參數

類型

描述

默認值

errorClass

String

指定錯誤提示的 css 類名，能夠自定義錯誤提示的樣式。

"error"

errorElement

String

用什麼標籤標記錯誤，默認是 label，能夠改爲 em。

"label"

errorPlacement

function

跟一個函數，能夠自定義錯誤放到哪裏。

input元素以後

success

 

要驗證的元素經過驗證後的動做，若是跟一個字符串，會看成一個 css 類，也可跟一個函數。

無

highlight

function

能夠給未經過驗證的元素加效果、閃爍等。

無

register.html

<!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>

form.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}-)?\d{7,8}$/g; // 區號－三、4位 號碼－七、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();
        },

    });
});

源碼下載

我已經將源碼打包了，幷包括js庫。下載以下：

bootstrap+jQuery.validate表單校驗

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程