본 글의 예시는 참고용으로 부트스트랩 검증 검증 기능을 공유합니다.
<!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>위 내용은 본 글의 전체 내용입니다. 귀하의 연구는 Duoduo에서 PHP 중국어 웹사이트를 지원합니다.
validate를 이용한 간단한 검증 기능 구현을 위한 부트스트랩 관련 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
