bootstrap使用validate實現(xiàn)簡單校驗功能
更新時間：2016年12月02日 08:49:19 作者：御影年華
這篇文章主要為大家詳細介紹了bootstrap使用validate實現(xiàn)簡單校驗功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了bootstrap validate校驗功能，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!--導(dǎo)包-->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--校驗-->
<script>
/* $(function(){
//校驗
$("#f1").validate({
rules:{
username:{
required:true,
},
password:{
required:true,
rangelength:[6,16]
},
repassword:{
equalTo:$("input[name='password']")
}
},
messages:{
username:{
required:"請輸入用戶名"
},
password:{
required:"請輸入密碼",
rangelength:[6,16]
},
repassword:{
equalTo:"兩次密碼不同哦"
}
}
});
})*/
//自定義校驗
$(function(){
$.validator.addMethod("check",function(param,ele,value){
//獲取到ele的爺節(jié)點
var e=ele.parentNode.parentNode;
//先判斷輸入是否正確
if(param!=null && param.length<=16 &¶m.length>=6)
{
//當不為空,并且長度在6和16之間時代表輸入正確,將顏色變?yōu)榫G色的樣式
//由于ele是JavaScript對象,所以如果要用jQuery的話需要包一下
// $(e).prop("class",$(e).prop("class")+" has-success");
// e.cclassName="form-group";
//將樣式清空
$(e).prop("class","form-group");
//追加樣式
e.className+=" has-success";
return true;
}else{
//js方法將樣式清空
e.setAttribute("class","form-group");
// $(e).prop("class","form-group");
//錯誤了,修改樣式
e.className+=" has-error";
//清空后還原樣式
return false;
}
})
$("#f1").validate({
rules:{
username:{
check:true,
},
password:{
check:true
},
repassword:{
equalTo:$("input[name='password']")
}
},
messages:{
username:{
check:"請輸入用戶名并且長度在6-16位之間"
},
password:{
check:"請輸入密碼并且長度在6-16位之間",
rangelength:[6,16]
},
repassword:{
equalTo:"兩次密碼不同哦"
}
}
})
})
</script>
<style>
/*提示的顏色*/
.form-group .error{
color: red;
}
</style>
</head>
<body>
<div class="container">
<!--第一行-->
<div class="row">
<div class="col-sm-4"><img src="../img/logo2.png"/></div>
<div class="col-sm-4"><img src="../img/header.png"></div>
<div class="col-sm-4" style="margin-top: 10px;">
<!--登錄注冊購物車-->
<a href="" class="btn btn-primary">登錄</a>
<a href="" class="btn btn-primary">注冊</a>
<a href="" class="btn btn-danger">購物車</a>
</div>
</div>
<!--第二行 導(dǎo)航欄-->
<div class="row">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首頁</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手機數(shù)碼 <span class="sr-only">(current)</span></a></li>
<li><a href="#">電腦辦公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">電影</a></li>
<li><a href="#">風(fēng)云</a></li>
<li><a href="#">你的名字</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">龍貓</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">更多鏈接</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--banner注冊主體-->
<div class="row" style="background-image: url(../img/regist_bg.jpg);">
<div class="col-sm-8 col-sm-offset-2" style="border: 7px gainsboro solid; background-color: white;">
<div class="row" style="margin-top: 5px;">
<div class="col-sm-offset-1"><a href=""><b><font size="4">用戶注冊</font></b></a></div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-1">
<form class="form-horizontal" id="f1">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="請輸入用戶名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">確認密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="請輸入確認密碼">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="請輸入email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性別</label>
<div class="col-sm-10" style="margin-top: 5px;">
<input type="radio" checked="checked" id="man" name="man">男
<input type="radio" id="woman" name="woman">女
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-danger">注冊</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="row" style="margin-top: 20px;">
<div class="col-xs-12"><img src="../img/footer.jpg"/ width="100%"></div>
</div>
<!--聯(lián)系我們-->
<div class="row">
<div class="col-xs-12 text-center">
<ul class="list-inline">
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
</div>
<!--版權(quán)信息-->
<div class="row">
<div class="col-xs-12 text-center">
Copyright © 2014-2017 御影年華版權(quán)所有
</div>
</div>
</div>
</body>
</html>
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了js實現(xiàn)收縮菜單效果實例代碼，有需要的朋友可以參考一下2013-10-10
javascript Slip.js實現(xiàn)整屏滑動的手機網(wǎng)頁
Slip.js能做什么？Slip.js可以讓你的手機網(wǎng)站像原生手機軟件一樣慣性滾動，手觸圖片輪換等等，對Slip.js感興趣的小伙伴們可以參考一下2015-11-11
javascript中JSON.parse()與eval()解析json的區(qū)別
這篇文章主要介紹了javascript中JSON.parse()與eval()解析json的區(qū)別,詳細描述了json格式數(shù)據(jù)的操作技巧,并結(jié)合實例形式對比分析了使用JSON.parse()與eval()解析json的區(qū)別,需要的朋友可以參考下2016-05-05
今天小編就為大家分享一篇layui use 定義js外部引用函數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了使用apifm-wxapi模塊中的問題及講解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
layer.confirm()右邊按鈕實現(xiàn)href的例子
今天小編就為大家分享一篇layer.confirm()右邊按鈕實現(xiàn)href的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
innerHTML 屬性的使用非常流行，因為他提供了簡單的方法完全替代一個 HTML 元素的內(nèi)容。另外一個方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。2008-06-06
可以拖動的div是一個比較難以做到的效果，特別是在瀏覽器對于js代碼的運行效率還不是足夠高的情況下，不過聽說firefox對于js的支持正在增加，大概是料到了js在網(wǎng)頁瀏覽的桌面化趨勢中所占的重要地位吧。2009-06-06
Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細介紹了JS作用域，剖析JS的作用域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12