Form 表单校验（bootstrapValidator）
- 引用 js 文件（必须）
<script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>- Form 表单
<form class="form-signin" id="loginForm" action="/login">
<h2 style="color: #dddddd;">管理员登录</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >账号</span>
<input type="text" class="form-control" name="loginAccount" placeholder="请输入账号/用户名" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >密码</span>
<input type="password" class="form-control" name="password" placeholder="请输入密码" aria-describedby="basic-addon1">
</div>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
</form>- 设置校验逻辑
$(function() {
$('#loginForm')//登录
.bootstrapValidator({
message: '登录校验',
feedbackIcons: {
/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
/*验证：规则*/
loginAccount: {//验证input项：验证规则
message: '登录账号验证',
threshold : 2 , //有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
validators: {
notEmpty: {//非空验证：提示消息
message: '账号/用户名不能为空'
},
stringLength: {
min: 2,
max: 20,
message: '账号/用户名长度必须在2到20之间'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/checkAdmin',//验证地址
message: '用户不存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
data:function(){
return {
loginAccount: $("#loginForm input[name='loginAccount']").val(),
loginName: $("#loginForm input[name='loginAccount']").val()
}
}
},
regexp: {
regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
message: '账号/用户名由数字、字母、汉字组成'
}
}
},
password: {
message: '密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 20,
message: '用户名长度必须在6到20之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '密码由数字字母下划线和.组成'
}
}
}
}
})
.on('success.form.bv', function (e) {//点击提交之后
//密码加密
var password = $('#loginForm input[name=password]').val();
$('#loginForm input[name=password]').val($.md5(password))
// 终止重复提交
e.preventDefault();
// 得到form表单对象
var $form = $(e.target);
// 获得bootstrap验证对象
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function (data) {
layer.msg(data.msg);
if(data.code == 1){
common.method.GoUrl("/page/base");
}else{
$('#loginForm button[type=submit]').attr("disabled",false);
}
});
});
});效果图
- 默认样式
- 校验效果（校验不通过时登录按钮不可点击）
- 校验成功（成功以后登录按钮才可以点击）
-
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台管理系统</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/statics/js/md5.js"></script>
<script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="/statics/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="/statics/js/common.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/statics/css/bootstrap.min.css" >
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/statics/css/bootstrap-theme.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/statics/js/bootstrap.min.js" ></script>
</head>
<body style="background: black url(../statics/images/login.jpg) no-repeat fixed top;" >
<div class="container" style="padding-top:10%;">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" >
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">账号登录</a></li>
<li role="presentation"><a href="#region" aria-controls="region" role="tab" data-toggle="tab">申请账号</a></li>
<li role="presentation"><a href="#regionInfo" aria-controls="regionInfo" role="tab" data-toggle="tab">申请信息查询</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="login">
<form class="form-signin" id="loginForm" action="/login">
<h2 style="color: #dddddd;">管理员登录</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >账号</span>
<input type="text" class="form-control" name="loginAccount" placeholder="请输入账号/用户名" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >密码</span>
<input type="password" class="form-control" name="password" placeholder="请输入密码" aria-describedby="basic-addon1">
</div>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="region">
<form class="form-signin" id="regionForm" action="/region">
<h2 style="color: #dddddd;">管理员申请</h2>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >名称</span>
<input type="text" class="form-control" name="loginName" placeholder="请输入用户名" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" style="color: red" >账号</span>
<input type="number" class="form-control" name="loginAccount" placeholder="请输入登录账号" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" style="color: red" >密码</span>
<input type="password" class="form-control" name="password" placeholder="请输入登录密码" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >昵称</span>
<input type="text" class="form-control" name="name" placeholder="请输入昵称" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >年龄</span>
<input type="number" class="form-control" name="age" min="0" max="120"/>
</div>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" >性别</span>
<input type="text" id="sex" class="form-control" placeholder="请选择性别" readonly="readonly" aria-label="...">
<input type="hidden" name="sex"/>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">请选择 <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a sex="true" onclick="$('input[name=sex]').val('true');$('#sex').val('男')">男</a></li>
<li role="separator" class="divider"></li>
<li><a sex="false" onclick="$('input[name=sex]').val('false');$('#sex').val('女')">女</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="form-group">
<div class="row">
<div class="col-lg-12" >
<textarea name="infoContent" rows="5" style="width: 100%;" placeholder="注册申请消息，管理员看到后会尽快给您审批通过的！！！"></textarea>
</div><!-- /.col-lg-6 -->
</div>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit" >提交</button>
<br><br>
<br><br>
</div>
<div class="col-sm-1"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="regionInfo">
<form class="form-signin" >
<h2 style="color: #dddddd;">申请信息查询</h2>
<div class="input-group">
<span class="input-group-addon" >请输入查询账号</span>
<input type="text" class="form-control" id="searchRegionInfo" placeholder="请输入查询账号...">
<span class="input-group-btn"><button class="btn btn-default" id="searchRegionBut" type="button">搜索</button></span>
</div>
<br>
<div class="form-group" style="color: #dddddd;display: none;" id="listInfo">
<table class="table table-striped table-bordered row" style="margin-left: 0px;" >
<thead>
<tr>
<th >申请时间</th>
<th >申请标题</th>
<th >申请内容</th>
<th >申请状态</th>
</tr>
</thead>
<tbody id="listItem">
</tbody>
</table>
</div>
<br>
<br>
</form>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
$("#searchRegionBut").click(function () {
var regionInfo = $("#searchRegionInfo").val().trim();
if(regionInfo != null && regionInfo != ""){
$.ajax({
url:"/serchRegionInfo",
data:{loginAccount:regionInfo},
success:function (data) {
layer.msg(data.msg);
if(data.code == 1){
$("#listInfo").show();
$("#listItem").empty();
$.each(data.data,function (i,t) {
var str = getDateToString(new Date( t.sendTime*1 ));
$("#listItem").append('<tr>\n' +
' <th class="min-mobile-l col-sm-2" data-date-format="yyyy-mm-dd">'+str+'</th>\n' +
' <th class="min-mobile-l col-sm-3">'+t.title+'</th>\n' +
' <th class="min-mobile-l col-sm-5">'+t.content+'</th>\n' +
' <th class="min-mobile-l col-sm-2">'+(t.isRead?'待审批':'未读')+'</th>\n' +
' </tr>')
})
}else{
$("#listInfo").hide();
}
}
})
}else{
layer.msg("请输入要查询的注册账号！！！")
}
})
function getDateToString(date){
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒";
}
$(function() {
$('#loginForm')//登录
.bootstrapValidator({
message: '登录校验',
feedbackIcons: {
/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
/*验证：规则*/
loginAccount: {//验证input项：验证规则
message: '登录账号验证',
threshold : 2 , //有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
validators: {
notEmpty: {//非空验证：提示消息
message: '账号/用户名不能为空'
},
stringLength: {
min: 2,
max: 20,
message: '账号/用户名长度必须在2到20之间'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/checkAdmin',//验证地址
message: '用户不存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
data:function(){
return {
loginAccount: $("#loginForm input[name='loginAccount']").val(),
loginName: $("#loginForm input[name='loginAccount']").val()
}
}
},
regexp: {
regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
message: '账号/用户名由数字、字母、汉字组成'
}
}
},
password: {
message: '密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 20,
message: '用户名长度必须在6到20之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '密码由数字字母下划线和.组成'
}
}
}
}
})
.on('success.form.bv', function (e) {//点击提交之后
//密码加密
var password = $('#loginForm input[name=password]').val();
$('#loginForm input[name=password]').val($.md5(password))
// 终止重复提交
e.preventDefault();
// 得到form表单对象
var $form = $(e.target);
// 获得bootstrap验证对象
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function (data) {
layer.msg(data.msg);
if(data.code == 1){
common.method.GoUrl("/page/base");
}else{
$('#loginForm button[type=submit]').attr("disabled",false);
}
});
});
$('#regionForm')//注册
.bootstrapValidator({
message: '登录校验',
feedbackIcons: {/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证：规则*/
loginName: {//验证input项：验证规则
message: '用户名异常',
threshold : 2 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
validators: {
stringLength: {
min: 2,
max: 20,
message: '用户名长度必须在2到20之间'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/checkAdmin',//验证地址
message: '用户已存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
data:function(){
return {
loginName: $("#regionForm input[name='loginName']").val(),
isLogin:false
}
}
},
regexp: {
regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
message: '用户名由数字、字母、汉字组成'
}
}
},
loginAccount: {//验证input项：验证规则
message: '登录账号验证',
threshold : 2 , //有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
validators: {
notEmpty: {//非空验证：提示消息
message: '账号/用户名不能为空'
},
stringLength: {
min: 2,
max: 20,
message: '账号/用户名长度必须在2到20之间'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/checkAdmin',//验证地址
message: '用户已存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
data:function(){
return {
loginAccount: $("#regionForm input[name='loginAccount']").val(),
isLogin:false
}
}
},
regexp: {
regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
message: '账号/用户名由数字、字母、汉字组成'
}
}
},
password: {
message: '密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 20,
message: '用户名长度必须在6到20之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '密码由数字字母下划线和.组成'
}
}
},
name: {
validators: {
stringLength: {
min: 1,
max: 20,
message: '用户名长度必须在1到20之间'
}
}
},
age: {
validators: {
regexp: {
regexp: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
message: '年龄范围为1-120'
}
}
}
}
})
.on('success.form.bv', function(e) {//点击提交之后
//密码加密
var password = $('#regionForm input[name=password]').val();
$('#regionForm input[name=password]').val($.md5(password))
// 终止重复提交
e.preventDefault();
// 得到form表单对象
var $form = $(e.target);
// 获得bootstrap验证对象
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(data) {
layer.msg(data.msg);
});
});
});
</script>
</html>
解释一下
| 页面密码加密传输 |
|
友好型提示 |
| bootstarp的校验插件，详见上文 |
- 本页面是基于bootstarp做的，所以要引入bootstarp的js和css才可以出来一上效果
- 所有外部文件(common.js 是自己定义的，这个可以不要)
<script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/statics/js/md5.js"></script>
<script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="/statics/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="/statics/js/common.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/statics/css/bootstrap.min.css" >
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/statics/css/bootstrap-theme.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/statics/js/bootstrap.min.js" ></script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
