bootstrap,bootstrapValidator实现登陆页面及输入校验

来源：互联网发布：网页淘宝退出登录在哪编辑：程序博客网时间：2024/06/05 16:32
一、引用的文件<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet"><link href="signin.css" rel="stylesheet"><script src="jquery-3.2.1.js"></script><script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>二、html完整代码<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <meta name="description" content="">    <meta name="author" content="">      <title>Signin Template for Bootstrap</title>    <!-- Bootstrap core CSS -->      <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->        <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="signin.css" rel="stylesheet">    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="jquery-3.2.1.js"></script>    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <div class="container">      <form class="form-signin" id="LoginG" >        <h2 class="form-signin-heading">Please sign in</h2><div class="form-group">        <label for="username" class="sr-only">Username</label>        <input type="text" id="username" name="username" class="form-control" placeholder="Username"/></div><div class="form-group">        <label for="password" class="sr-only">Password</label>        <input type="password" id="password" name="password" class="form-control" placeholder="Password" /></div>        <div class="checkbox">          <label>            <input type="checkbox" value="remember-me"> Remember me          </label>        </div>        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>      </form>    </div> <!-- /container -->       <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script type="text/javascript">$(function () {        $('#LoginG').bootstrapValidator({            //message: 'This value is not valid',            feedbackIcons: {                valid: 'glyphicon glyphicon-ok',                invalid: 'glyphicon glyphicon-remove',                validating: 'glyphicon glyphicon-refresh'            },            fields: {                username: {                    message: '用户名验证失败',                    validators: {                        notEmpty: {                            message: '用户名不能为空'                        },                        stringLength: {                            min: 6,                            max: 18,                            message: '用户名长度必须在6到18位之间'                        },                        regexp: {                            regexp: /^[a-zA-Z0-9_]+$/,                            message: '用户名只能包含大写、小写、数字和下划线'                        }                    }                },                password: {                    validators: {                        notEmpty: {                            message: '密码不能为空'                        }                    }                }            }        }).on('success.form.bv', function(e) {//点击提交之后           alert("验证成功登陆跳转。。。");   return;         // Use Ajax to submit form data 提交至form标签中的action，result自定义          $.post("", "", function(result) {          //do something...          });    });});</script></body></html>三、signin.css完成代码body {  background: url(4.jpg) no-repeat;  background-size:cover;   padding-top: 40px;  padding-bottom: 40px;  background-color: #eee;}.form-signin {  max-width: 430px;  padding: 50px;  margin: 0 auto;  background: rgba(255,255,255,0.2);}.form-signin .form-signin-heading,.form-signin  {  margin-bottom: 10px;}.form-signin .checkbox {  font-weight: normal;}.form-signin .form-control {  position: relative;  height: auto;  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;  padding: 10px;  font-size: 16px;}.form-signin .form-control:focus {  z-index: 2;}.form-signin input[type="text"] {  margin-bottom: 0px;}.form-signin input[type="password"] {  margin-bottom: 0px;}.checkbox {margin-bottom: 10px;margin-top: 0px;}.glyphicon{margin-top: 5px;}    四、浏览器控制台报Uncaught RangeError: Maximum call stack size exceeded处理办法：   是否加入：<div class="form-group"></div>
阅读全文
0 0