基于BootStrap與jQuery.validate實現(xiàn)表單提交校驗功能
談談表單校驗
這大概是一種慣例，學習前臺后臺最開始接觸的業(yè)務都是用戶注冊和登錄。現(xiàn)在社會堅持以人為本的理念，在網(wǎng)站開發(fā)過程同樣如此。User是我們面對較多的對象，也是較核心的對象。最開始的用戶注冊和登陸這塊，也就尤為重要。
直接看demo：http://www.suchso.com/code/bootstrapvalidate/
用戶注冊和登錄其實往往比我們想象的難。就比如表單校驗，里面涵蓋的內(nèi)容其實挺多，就前臺而言，你需要了解：
1.正則表達式的基本了解
其實正則并不難，并且在學會后能帶給你極大的成就感，享受那種事半功倍的效果吧。
2.ajax異步請求
在驗證用戶名是否存在、用戶登錄時賬號或者密碼錯誤時給出相應的提示。
3.一些方便的驗證庫，比如jQuery.validate
正因為如此普遍的需求和一定的復雜性，bootstrap表單和jQuery.validate表單校驗等一些優(yōu)秀的類庫專為人們解決UI、表單校驗問題。
下面就是我用bootstrap+jQuery.validate做的界面：
bootstrap3基本表單和水平表單
基本表單
基本的表單結(jié)構(gòu)是 Bootstrap 自帶的，下面列出了創(chuàng)建基本表單的步驟：
向父元素<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>
效果如下：
水平表單
在了解水平表單之間，我們應該對bootstrap的網(wǎng)格系統(tǒng)有所了解。
Bootstrap 包含了一個響應式的、移動設備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設備或視口大小的增加而適當?shù)財U展到 12 列。它包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。
響應式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列,也就是說它是以百分比定義寬度的。
水平表單與其他表單不僅標記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個水平布局的表單，請按下面的幾個步驟進行：
向父 <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>
效果如下：
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));
}, "請正確填寫您的手機號碼。");
調(diào)用自定義校驗
rules : {
phone : {
required : true,
isPhone : true
}
}
自定義錯誤顯示
|
參數(shù) |
類型 |
描述 |
默認值 |
|
errorClass |
String |
指定錯誤提示的 css 類名，可以自定義錯誤提示的樣式。 |
"error" |
|
errorElement |
String |
用什么標簽標記錯誤，默認是 label，可以改成 em。 |
"label" |
|
errorPlacement |
function |
跟一個函數(shù)，可以自定義錯誤放到哪里。 |
input元素之后 |
|
success |
|
要驗證的元素通過驗證后的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數(shù)。 |
無 |
|
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; // 區(qū)號－3、4位 號碼－7、8位
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼。");
// 匹配密碼，以字母開頭，長度在6-12之間，必須包含數(shù)字和特殊字符。
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之間，必須包含數(shù)字和特殊字符。");
$("#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();
},
});
});
以上所述是小編給大家介紹的基于BootStrap與jQuery.validate實現(xiàn)表單提交校驗功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- jQuery中使用validate插件校驗表單功能
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
- jQuery form 表單驗證插件(fieldValue)校驗表單
- jQuery form插件之formDdata參數(shù)校驗表單及驗證后提交
- jQuery Validate表單驗證插件 添加class屬性形式的校驗
- jquery表單驗證使用插件formValidator
- jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
- jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
- jQuery表單驗證插件formValidator(改進版)
- jQuery表單校驗插件validator使用方法詳解
相關(guān)文章
最近做項目需要這樣的需求，當用戶點擊標簽欄按鈕，向下彈出菜單，再次點擊，收回菜單。接下來通過本文給大家介紹微信小程序?qū)崿F(xiàn)彈出菜單功能，感興趣的朋友一起看看吧2018-06-06
JS簡單判斷字符在另一個字符串中出現(xiàn)次數(shù)的2種常用方法
這篇文章主要介紹了JS簡單判斷字符在另一個字符串中出現(xiàn)次數(shù)的2種常用方法,結(jié)合實例形式分析了js字符串分割計算與正則操作2種實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JavaScript null undefined分析2009-07-07
js點擊按鈕實現(xiàn)水波紋效果代碼（CSS3和Canves）
這篇文章主要為大家詳細介紹了點擊按鈕實現(xiàn)水波紋效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)
我們經(jīng)常會碰到樹形數(shù)據(jù)結(jié)構(gòu)，比方組織層級、省市縣或者者動植物分類等等數(shù)據(jù)，那么如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)，本文就詳細的來了解一下2021-06-06
這篇文章主要介紹了JS 實現(xiàn)請求調(diào)度器的方法，幫助大家更好的理解和學習使用js，感興趣的朋友可以了解下2021-03-03
本文給大家介紹JavaScript語句的執(zhí)行過程的相關(guān)知識，對js語句執(zhí)行過程的相關(guān)知識感興趣的朋友一起學習吧2016-01-01
簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析
這篇文章主要介紹了簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
JS學習筆記之數(shù)組去重實現(xiàn)方法小結(jié)
這篇文章主要介紹了JS學習筆記之數(shù)組去重實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了javascript數(shù)組去重的5種常見實現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本文通過js和cas代碼分別給大家介紹了移動端判斷手機橫豎屏狀態(tài)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07