溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“BootStrap怎么實現表單驗證”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“BootStrap怎么實現表單驗證”這篇文章吧。
Bootstrap，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
下面給大家分享bootstrap表單驗證實例代碼，具體代碼如下所示：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../include/taglib.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <%@include file="../include/common.jsp" %> <script type="text/javascript" src="form.js"></script> <script type="text/javascript" src="bootstrapValidator.min.js"></script> <link rel="stylesheet" href="../../css/edit.css"> <link rel="stylesheet" href="bootstrapValidator.min.css"> <title>表單測試</title> </head> <body class="no-skin"> <div class="main-container" id="main-container"> <div class="main-content"> <div class="main-content-inner"> <div class="page-content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <form id="formTest" class="form-horizontal" role="form"> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">用戶姓名:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="username" name="username" class="col-xs-12 col-sm-12 col-md-12" placeholder="用戶姓名"/> </div> </div> </div> <!-- 生日--> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">生 日:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="birthday" name="birthday" class="col-xs-12 col-sm-12 col-md-12" placeholder="生日"/> </div> </div> </div> <!-- 郵件 --> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">郵 件:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="email" name="email" class="col-xs-12 col-sm-12 col-md-12" placeholder="郵件"/> </div> </div> </div> <!-- 密碼 --> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">密 碼:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="password" name="password" class="col-xs-12 col-sm-12 col-md-12" placeholder="密碼"/> </div> </div> </div> <!-- 確認密碼 --> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">確認密碼:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="confirmPassword" name="confirmPassword" class="col-xs-12 col-sm-12 col-md-12" placeholder="確認密碼"/> </div> </div> </div> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">語 言:</label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="checkbox" id="languages" name="languages" value="中文" />中文 </div> <div> <input type="checkbox" id="languages" name="languages" value="英語" />英語 </div> <div> <input type="checkbox" id="languages" name="languages" value="德語" />德語 </div> <div> <input type="checkbox" id="languages" name="languages" value="韓語" />韓語 </div> </div> </div> <!-- 自定義 --> <div class="form-group"> <label class="col-xs-3 col-sm-3 col-md-5 no-padding-right" id="callbackshow"></label> <div class="col-xs-3 col-sm-3 col-md-3"> <div> <input type="text" id="callbacktest" name="callbacktest" class="col-xs-12 col-sm-12 col-md-12" placeholder="自 定 義"/> </div> </div> </div> </form> <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content --> </div><!-- /.main-content-inner --> </div><!-- /.main-content --> <div class="clear-div"></div> <div class="footer-button-box container" > <div class="button-conent"> <button class="btn" type="button" id="submitBtn"> 提交 </button> <button class="btn" type="button" id="resetBtn"> 重置 </button> </div><!-- /.button-conent --> </div><!-- /.footer-button-box --> </div><!-- /.main-container --> </body> </html>
--------------------------------------------------引入js----------------------------------------------------------------------
$(function () {
//重置
$('#resetBtn').click(function(){
//清空表單驗證內容
$('#formTest')[0].reset();
//清空表單驗證信息
$('#formTest').bootstrapValidator('resetForm');
});
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#callbackshow').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
//校驗
$('#formTest').bootstrapValidator({
message : '',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
//驗證用戶名字
fields: {
username: {
message: '用戶名驗證失敗',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: {
min: 2,
max: 4,
message: '名字長度只能為2-4位'
},
regexp: {
regexp: /^[\u2E80-\u9FFF]+$/,
message: '只能為漢字'
},
}
},//end username
birthday:{
validators: {
notEmpty: {
message: '生日不能為空'
},
date:{
format: 'YYYY/MM/DD',
message:'輸入正確的日期格式，YYYY/MM/DD'
}
}
},//end birthday
//驗證email
email: {
validators: {
notEmpty: {
message: '郵箱地址不能為空'
},
emailAddress: {
message: '郵箱地址不對'
}
}
},//end email
password:{
validators: {
notEmpty: {
message: '密碼不能為空'
},
stringLength: {
min: 6,
max: 15,
message: '密碼長度最小為6最多為15'
},
regexp: {
regexp: /^[\d]+$/,
message: '只能為數字'
},
}
},//end password
confirmPassword:{
validators: {
notEmpty: {
message: '密碼不能為空'
},
stringLength: {
min: 6,
max: 15,
message: '密碼長度最小為6最多為15'
},
identical: {
field: 'password',
message: '2次密碼不一致'
},
}
},//end confirmPassword
'languages': {
validators: {
notEmpty: {
message: '至少要選擇一個'
},
choice: {
min: 2,
max: 3,
message: '選擇2-3個'
}
}
},//end languages
callbacktest:{
validators: {
callback:{
message:'輸入錯誤',
callback:function(value,validator){
var items = $('#callbackshow').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
console.log(sum);
return value == sum;
}
}
}
},//end callbacktest
}
});
//表單提交
$("#formTest").submit(function(ev){ev.preventDefault();});
$("#submitBtn").on("click", function(){
var bootstrapValidator = $("#formTest").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
$.ajaxRequest({
url : 'www.baidu.com',
});
}else{
return;
}
});
});以上是“BootStrap怎么實現表單驗證”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
