bootstrap使用validate实现简单校验功能
更新时间：2016年12月02日 08:49:19 作者：御影年华
这篇文章主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了bootstrap validate校验功能，供大家参考，具体内容如下
<!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>
<!--导包-->
<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 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>
<!--第二行 导航栏-->
<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="#">手机数码 <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="#">风云</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>
<!--联系我们-->
<div class="row">
<div class="col-xs-12 text-center">
<ul class="list-inline">
<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 class="row">
<div class="col-xs-12 text-center">
Copyright © 2014-2017 御影年华版权所有
</div>
</div>
</div>
</body>
</html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤
在线查看PDF文件,已经是很常见的需求了,下面这篇文章主要给大家介绍了关于微信小程序使用webview打开pdf文档以及显示网页内容的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
字符串的操作在js中非常频繁,也非常重要,下面这篇文章主要给大家介绍了关于JS字符串属性与方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了一个不错的js html页面倒计时可精确到秒,很简单，但和实用，需要的朋友可以参考下2014-10-10
微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,这篇文章主要给大家介绍了关于微信小程序webview和小程序通讯实际操作的相关资料,需要的朋友可以参考下2024-07-07
本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
Function是javascript里最常用的一个概念，javascript里的function是最容易入手的一个功能，但它也是javascript最难理解最难掌握的一个概念。这篇文章主要介绍了JavaScript中的Function类型的相关资料，一起看下吧2016-07-07
这篇文章主要给大家介绍了关于微信小程序组件生命周期的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
本文给大家分享一段代码基于js实现EOS隐藏错误提示层，对eos隐藏提示层的相关知识感兴趣的朋友一起学习吧2016-04-04
javascript 添加和移除函数的通用方法, 需要的朋友可以参考下。2009-10-10
在Echarts中,我们很多时候是需要给自己想要的几个区域的地图进行颜色高亮,这篇文章主要给大家介绍了关于echarts 3D地图为区域自定义颜色的相关资料,需要的朋友可以参考下2021-08-08
最新评论