The example of this article shares the bootstrap validate verification function for your reference. The specific content is as follows
<!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="/static/imghwm/default1.png" data-src="../img/logo2.png" class="lazy" / alt="bootstrap uses validate to implement simple verification function" ></div>
<div><img src="/static/imghwm/default1.png" data-src="../img/header.png" class="lazy" alt="bootstrap uses validate to implement simple verification function" ></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="/static/imghwm/default1.png" data-src="../img/footer.jpg" class="lazy" / style="max-width:90%" alt="bootstrap uses validate to implement simple verification function" ></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>The above is the entire content of this article. I hope it will be helpful to your study and I hope you will support it. PHP Chinese website.
For more articles related to bootstrap using validate to implement simple verification functions, please pay attention to the PHP Chinese website!
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Roblox: Grow A Garden - Complete Mutation Guide
3 weeks agoByDDD
Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How to fix KB5055612 fails to install in Windows 10?
3 weeks agoByDDD
Nordhold: Fusion System, Explained
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Blue Prince: How To Get To The Basement
4 weeks agoByDDD
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SublimeText3 Chinese version
Chinese version, very easy to use
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
