Bootstrap verwendet „Validate“, um eine einfache Verifizierungsfunktion zu implementieren
- 高洛峰Original
- 2017-01-03 17:30:511825Durchsuche
Das Beispiel in diesem Artikel teilt die Bootstrap-Validierungsüberprüfungsfunktion als Referenz. Der spezifische Inhalt lautet wie folgt:
<!DOCTYPE html>
<html>
<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>
<!--导包-->
<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的爷节点
var e=ele.parentNode.parentNode;
//先判断输入是否正确
if(param!=null && param.length<=16 &¶m.length>=6)
{
//当不为空,并且长度在6和16之间时代表输入正确,将颜色变为绿色的样式
//由于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>
<!--第一行-->
<div>
<div><img src="../img/logo2.png"/></div>
<div><img src="../img/header.png"></div>
<div 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>
<!--第二行 导航栏-->
<div>
<nav class="navbar navbar-default navbar-inverse">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a 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><a href="#">手机数码 <span>(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span></span></a>
<ul>
<li><a href="#">电影</a></li>
<li><a href="#">风云</a></li>
<li><a href="#">你的名字</a></li>
<li role="separator"></li>
<li><a href="#">龙猫</a></li>
<li role="separator"></li>
<li><a href="#">更多链接</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div>
<input type="text" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--banner注册主体-->
<div 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 style="margin-top: 5px;">
<div><a href=""><b><font size="4">用户注册</font></b></a></div>
</div>
<div>
<div class="col-sm-9 col-sm-offset-1">
<form id="f1">
<div>
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
<div>
<input type="password" id="repassword" name="repassword" placeholder="请输入确认密码">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">Email</label>
<div>
<input type="text" id="email" name="email" placeholder="请输入email">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
<div>
<input type="text" id="name" name="name" placeholder="请输入姓名">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div style="margin-top: 5px;">
<input type="radio" checked="checked" id="man" name="man">男
<input type="radio" id="woman" name="woman">女
</div>
</div>
<div>
<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 style="margin-top: 20px;">
<div><img src="../img/footer.jpg"/ width="100%"></div>
</div>
<!--联系我们-->
<div>
<div class="col-xs-12 text-center">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
<!--版权信息-->
<div>
<div class="col-xs-12 text-center">
Copyright © 2014-2017 御影年华版权所有
</div>
</div>
</div>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels Ihre Studie. Duoduo unterstützt die chinesische PHP-Website.
Weitere Artikel zum Thema Bootstrap mit Validierung zur Implementierung einfacher Verifizierungsfunktionen finden Sie auf der chinesischen PHP-Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Implementierungsmethode, um den Wert der von select ausgewählten Option abzurufenNächster Artikel：jQuery-Implementierungsmethode, um den Wert der von select ausgewählten Option abzurufen