1、Bootstrap：Form 表单
在WEB开发过程中，经常遇到需要做表单提交，良好的提示增加用户体验感。在Bootstrap UI使用表单验证，构建登录界面。
2、Bootstrap：引用相关JS和CSS
<link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctxPath}/static/css/plugins/validate/bootstrapValidator.min.css" rel="stylesheet" />
<link href="${ctxPath}/static/css/login.css" rel="stylesheet">
<script src="${ctxPath}/static/js/jquery.min.js"></script>
<script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>
3、Bootstrap：Html添加Form表单
<form id="loginForm" class="m-t" role="form" action="${ctxPath}/login" method="post">
<div class="form-group">
<div class="input-group" style="text-align: left">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" name="username" class="form-control" placeholder="用户名" required="">
</div>
</div>
<div class="form-group">
<div class="input-group" style="text-align: left">
<span class="input-group-addon">
<span class="glyphicon glyphicon-eye-open"></span>
</span>
<input type="password" name="password" class="form-control" placeholder="密码" required="">
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary block full-width m-b">登 录</button>
</p>
</form>
在HTML尾部引用当前登录界面的login.js
<script src="${ctxPath}/static/modular/login/login.js"></script>
1
4、Bootstrap：添加login.js中bootstrapValidator 自定义验证
$(function () {
$('#loginForm').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: 30,
message: '用户名长度必须在4到12之间'
},
threshold : 4 , //设置4字符以上开始请求服务器
//有待验证，备注以备下次使用。
//bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
//{"valid":false} //表示不合法，验证不通过
//{"valid":true} //表示合法，验证通过
remote: {//发起Ajax请求。
url: 'user/name',//验证地址
data:{userName:$('input[name="userName"]').val() }
message: '用户已存在',//提示消息
delay : 2000,//设置2秒发起名字验证
type: 'POST' //请求方式
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '密码长度必须在6到12位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
}
}
}
}
})
.on('success.form.bv', function(e) {//点击提交之后
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(result) {
//恢复submit按钮disable状态。
$('#loginForm').bootstrapValidator('disableSubmitButtons', false);
//do something...
});
});
});
5、Bootstrap：From表单验证效果
注意：有些错误无法自定义居左居右还是居中。
通过浏览器调试工具，如图所示
然后在login.css重写Class=“help-block” 的样式，你可以自定义居中居左还是居右。注意css引用顺序，重载login.css应放在最后引用。
.help-block
{
text-align: left;
}
本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。
本文地址：http://www.xlkjgs.com/notes/html/3725.html
微信扫一扫打赏
支付宝扫一扫打赏
川公网安备 51080202000147号
