bootstrap用validate简单实现校验

最新推荐文章于 2024-11-10 22:45:39 发布
御影年华
最新推荐文章于 2024-11-10 22:45:39 发布
阅读量711
点赞数 1
分类专栏： web 文章标签：前端 bootstrap
本文链接：https://blog.csdn.net/wkfyynh/article/details/53426238
版权
web 专栏收录该内容
5 篇文章 0 订阅
订阅专栏
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 &copy; 2014-2017  御影年华版权所有
    		</div>
    	</div>
    </div>
    
  </body>
</html>