您好,登錄后才能下訂單哦!
小編給大家分享一下Bootstrap中表單驗證插件BootstrapValidator怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Bootstrap是現(xiàn)在非常流行的一款前端框架,這篇來介紹一款基于Bootstrap的驗證插件BootstrapValidator。
先來看一下效果圖(樣式是不是還不錯O(∩_∩)O哈哈~)。
Bootstrapvalidator下載地址:https://github.com/nghuuphuoc/bootstrapvalidator/?
引入對應的CSS和JS
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" rel="external nofollow" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> <script src="js/bootstrapValidator.js"></script>
添加驗證規(guī)則
使用HTML添加驗證。
對某一個標簽添加驗證規(guī)則,需要放在<div class="form-group"></div>標簽中,input標簽必須有name屬性值,此值為驗證匹配的字段。其實就是要符合bootstrap表單結構。
<div class="form-group"> <label class="col-md-2 control-label">學號</label> <div class="col-md-6"> <input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用戶名不能為空" /> </div> </div>
初始化bootstrapValidator。
<script type="text/javascript"> $('form').bootstrapValidator({ //默認提示 message: 'This value is not valid', // 表單框里右側的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表單提交成功時會調用此方法 // validator: 表單驗證實例對象 // form jq對象 指定表單對象 // submitButton jq對象 指定提交按鈕的對象 } }); </script>
效果圖。
使用data-bv-notempty 和 data-bv-notempty-message屬性就可以簡單進行非空驗證。data-bv-notempty 有值就進行非空驗證,data-bv-notempty-message 中的值為提示消息。
使用JS添加驗證
HTML樣式代碼。
<div class="form-group"> <label class="col-md-2 control-label">姓名</label> <div class="col-md-6"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">年齡</label> <div class="col-md-6"> <input type="text" class="form-control" name="age" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">電話</label> <div class="col-md-6"> <input type="text" class="form-control" name="phoneNumber" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Email</label> <div class="col-md-6"> <input type="text" class="form-control" name="email" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">密碼</label> <div class="col-md-6"> <input type="text" class="form-control" name="pwd" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">確定密碼</label> <div class="col-md-6"> <input type="text" class="form-control" name="pwd1" /> </div> </div>
JS驗證代碼,其中fields屬性中的值,需要和HTML標簽中的name值一樣,確定給那個標簽添加驗證。
<script type="text/javascript"> $('form').bootstrapValidator({ //默認提示 message: 'This value is not valid', // 表單框里右側的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表單提交成功時會調用此方法 // validator: 表單驗證實例對象 // form jq對象 指定表單對象 // submitButton jq對象 指定提交按鈕的對象 }, fields: { username: { message: '用戶名驗證失敗', validators: { notEmpty: { //不能為空 message: '用戶名不能為空' }, remote: { //后臺驗證,比如查詢用戶名是否存在 url: 'student/verifyUsername', message: '此用戶名已存在' } } }, name: { message: '姓名驗證失敗', validators: { notEmpty: { message: '姓名不能為空' } } }, age: { message: '年齡驗證失敗', validators: { notEmpty: { message: '年齡不能為空' }, numeric: { message: '請?zhí)顚憯?shù)字' } } }, phoneNumber: { message: '電話號驗證失敗', validators: { notEmpty: { message: '電話號不能為空' }, regexp: { //正則驗證 regexp: /^1\d{10}$/, message: '請輸入正確的電話號' } } }, email: { message: 'Email驗證失敗', validators: { notEmpty: { message: 'Email不能為空' }, emailAddress: { //驗證email地址 message: '不是正確的email地址' } } }, pwd: { notEmpty: { message: '密碼不能為空' }, stringLength: { //檢測長度 min: 4, max: 15, message: '用戶名需要在4~15個字符' } }, pwd1: { message: '密碼驗證失敗', validators: { notEmpty: { message: '密碼不能為空' }, identical: { //與指定控件內容比較是否相同,比如兩次密碼不一致 field: 'pwd',//指定控件name message: '兩次密碼不一致' } } } } }); </script>
效果如下。
AJAX后臺交互驗證,驗證用戶名是否存在。
<div class="form-group"> <label class="col-md-2 control-label">用戶名</label> <div class="col-md-6"> <input type="text" class="form-control" name="username" /> </div> </div>
<script type="text/javascript"> $('form').bootstrapValidator({ //默認提示 message: 'This value is not valid', // 表單框里右側的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表單提交成功時會調用此方法 // validator: 表單驗證實例對象 // form jq對象 指定表單對象 // submitButton jq對象 指定提交按鈕的對象 }, fields: { username: { message: '用戶名驗證失敗', validators: { notEmpty: { //不能為空 message: '用戶名不能為空' }, remote: { //后臺驗證,比如查詢用戶名是否存在 url: 'student/verifyUsername', message: '此用戶名已存在' } } } } }); </script>
后臺驗證返回格式必須為{“valid”, true or false} 的json數(shù)據格式。后臺verifyUsername驗證判斷方法。
@RequestMapping(value="/verifyUsername") @ResponseBody public Map verifyUsername(String username){ Student stu = studentService.findByUsername(username); Map map = new HashMap(); if (stu == null) { map.put("valid", true); }else{ map.put("valid", false); } return map; }
效果如下。
下面是幾個比較常見的驗證規(guī)則。
notEmpty:非空驗證;
stringLength:字符串長度驗證;
regexp:正則表達式驗證;
emailAddress:郵箱地址驗證(都不用我們去寫郵箱的正則了~~)
base64:64位編碼驗證;
between:驗證輸入值必須在某一個范圍值以內,比如大于10小于100;
creditCard:身份證驗證;
date:日期驗證;
ip:IP地址驗證;
numeric:數(shù)值驗證;
url:url驗證;
callback:自定義驗證
Form表單的提交
關于提交,可以直接用form表單提交即可。
<div class="form-group"> <div class="col-md-6 col-md-offset-2"> <button id="btn" type="submit" class="btn btn-primary">提交</button> </div> </div>
也可以通過AJAX提交,提交按鈕代碼和form表單的提交按鈕代碼一樣,通過id選中按鈕綁定點擊事件提交。
$("#btn").click(function () { //非submit按鈕點擊后進行驗證,如果是submit則無需此句直接驗證 $("form").bootstrapValidator('validate'); //提交驗證 if ($("form").data('bootstrapValidator').isValid()) { //獲取驗證結果,如果成功,執(zhí)行下面代碼 alert("yes"); //驗證成功后的操作,如ajax } });
效果圖,這里驗證通過后通過彈框提示的,方法中可以寫AJAX提交代碼。
頁面完整代碼。
<meta charset="UTF-8"> <form action="" class="form-horizontal"> <div class="form-group"> <label class="col-md-2 control-label">學號</label> <div class="col-md-6"> <input type="text" class="form-control" name="stuNumber" data-bv-notempty="true" data-bv-notempty-message="用戶名不能為空" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">用戶名</label> <div class="col-md-6"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">姓名</label> <div class="col-md-6"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">年齡</label> <div class="col-md-6"> <input type="text" class="form-control" name="age" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">電話</label> <div class="col-md-6"> <input type="text" class="form-control" name="phoneNumber" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Email</label> <div class="col-md-6"> <input type="text" class="form-control" name="email" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">密碼</label> <div class="col-md-6"> <input type="text" class="form-control" name="pwd" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">確定密碼</label> <div class="col-md-6"> <input type="text" class="form-control" name="pwd1" /> </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-2"> <button id="btn" type="submit" class="btn btn-primary">提交</button> </div> </div> </form> <script type="text/javascript"> $(function () { $('form').bootstrapValidator({ //默認提示 message: 'This value is not valid', // 表單框里右側的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表單提交成功時會調用此方法 // validator: 表單驗證實例對象 // form jq對象 指定表單對象 // submitButton jq對象 指定提交按鈕的對象 }, fields: { username: { message: '用戶名驗證失敗', validators: { notEmpty: { //不能為空 message: '用戶名不能為空' }, remote: { //后臺驗證,比如查詢用戶名是否存在 url: 'student/verifyUsername', message: '此用戶名已存在' } } }, name: { message: '姓名驗證失敗', validators: { notEmpty: { message: '姓名不能為空' } } }, age: { message: '年齡驗證失敗', validators: { notEmpty: { message: '年齡不能為空' }, numeric: { message: '請?zhí)顚憯?shù)字' } } }, phoneNumber: { message: '電話號驗證失敗', validators: { notEmpty: { message: '電話號不能為空' }, regexp: { //正則驗證 regexp: /^1\d{10}$/, message: '請輸入正確的電話號' } } }, email: { message: 'Email驗證失敗', validators: { notEmpty: { message: 'Email不能為空' }, emailAddress: { //驗證email地址 message: '不是正確的email地址' } } }, pwd: { notEmpty: { message: '密碼不能為空' }, stringLength: { //檢測長度 min: 4, max: 15, message: '用戶名需要在4~15個字符' } }, pwd1: { message: '密碼驗證失敗', validators: { notEmpty: { message: '密碼不能為空' }, identical: { //與指定控件內容比較是否相同,比如兩次密碼不一致 field: 'pwd',//指定控件name message: '兩次密碼不一致' } } } } }); $("#btn").click(function () { //非submit按鈕點擊后進行驗證,如果是submit則無需此句直接驗證 $("form").bootstrapValidator('validate'); //提交驗證 if ($("form").data('bootstrapValidator').isValid()) { //獲取驗證結果,如果成功,執(zhí)行下面代碼 alert("yes"); //驗證成功后的操作,如ajax } }); }) </script>
Bootstrap是目前最受歡迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷,它還有一個響應最好的Grid系統(tǒng),并且能夠在手機端通用,而Bootstrap是使用許多可重用的CSS和JavaScript組件,可以幫助實現(xiàn)需要的幾乎任何類型的網站的功能,此外,所有這些組件都是響應式的。
以上是“Bootstrap中表單驗證插件BootstrapValidator怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。