bootstrap用validate简单实现校验

来源：互联网发布：excel把多列数据合并编辑：程序博客网时间：2024/05/17 07:57
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>
0 0