Angularjs的Bootstrap验证 [英] Bootstrap Validation with Angularjs
本文介绍了Angularjs的Bootstrap验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hiii All，
i有一个登录表格，下面的代码是
< html >
< ; head >
< script type = text / javascript >
$（ document ）。ready（ function （）{
$（' ＃loginForm'）。bootstrapValidator（{
framework：' bootstrap'，
排除：[' ：禁用']，
图标：{
有效： ' glyphicon glyphicon-ok'，
无效：' glyphicon glyphicon-remove'，
验证：' glyphicon glyphicon-refresh'
}，
// 错误：{
// //您可以将其设置为popover
// //然后消息将显示在Bootstrap popover中
// cont ainer：'工具提示'
// }，
字段：{
用户名：{
验证者：{
notEmpty：{
message：' 用户名是必需的'
}
}
}，
密码：{
验证者：{
notEmpty：{
message：' 密码是必需的'
}
// }，
/ / regexp：{
// regexp：/ ^ [az \ s] + $ / i，
// 消息：'密码可以包含字母仅限字符。'
// }
// regexp：{
// regexp：/ ^ [az \s] + $ / i，
// < span class =code-comment> message：'全名可以包含字母字符和空格'
// }
}
}
}
}）
.on（< span class =code-string>' success.field.fv'， function （e，数据）{
if （data.fv.getInvalidFields（）。length = 0 ）{ // 存在无效字段
data.fv.disableSubmitButtons（真）;
}
}）;
}）;
< / script >
< / head >
< body >
< h2 > 登录< span class =code-keyword>< / h2 >
< div class = container < span class =code-attribute> style = >
< form id = loginForm novalidate ng-submit = loginform。$ valid&& ; login.submit（）
方法 = post class = form-horizontal data- ng-controller = IMSController >
< div class = form-group >
< label class = col-xs-3 control-label > 用户名< / label > ;
< div class = col-xs-5 >
< span class =code-keyword>< input type = text class = form-control 名称 = < span class =code-keyword> username data-ng-model = LoginUserName novalidate / >
< / div >
< / div >
< div class = form-group >
< label class = col-xs-3 control-label > 密码< / label >
< div class = col-xs-5 >
< 输入 类型 = 密码 class = 表格控制 名称 = 密码 data-ng-model = LoginPassword < span class =code-attribute> novalidate / >
< / div >
< < span class =code-leadattribute> / div >
< ; div class < span class =code-keyword> = 复选框 样式 = margin-removed 292px >
< label > < input type = 复选框 data-ng-model = RememberMe > 记住我< / label >
< / div >
< br / > ;
< div class = 表单-group >
< div class = col-xs-5 col-xs-offset-3 >
< 按钮 类型 = 提交 class = btn btn-primary ng-click = checkLogin（） > 登录< / button >
< 按钮 type = reset < span class =code-attribute> class = btn btn-default > 重置< / button >
< / div >
< / div >
< / form >
< / div >
< / body > ;
< / html >
，每当我点击登录按钮时，ng-click方法是ex即使验证失败也要保证..
我怎么能阻止这个...
在这方面的任何帮助都非常感谢。
先谢谢.. :)
解决方案
（ document ）。ready（ function （）{
（' ＃loginForm'）。bootstrapValidator（{
framework：' bootstrap' ，
排除：[' ：disabled']，
icon：{
有效：' glyphicon glyphicon-ok'，
无效： ' glyphicon glyphicon-remove'，
有效ating：' glyphicon glyphicon-refresh'
}，
// 错误：{
// < span class =code-comment> //您可以将其设置为popover
// //然后消息将显示在Bootstrap popover中
// container：'tooltip '
// }，
字段：{
用户名：{
验证人：{
notEmpty：{
message：' 用户名是必需的d'
}
}
}，
密码：{
验证人：{
notEmpty：{
message：< span class =code-string>' 密码是必需的'
}
// }，
// regexp：{
// regexp：/ ^ [az \s ] +
/ i，
// 消息：'密码只能包含字母字符。'
// }
// < span class =code-comment> regexp：{
// regexp：/ ^ [az\s] +
Hiii All,
i have a login form with the below code
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
$('#loginForm').bootstrapValidator({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
//err: {
// // You can set it to popover
// // The message then will be shown in Bootstrap popover
// container: 'tooltip'
//},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
//},
//regexp: {
// regexp: /^[a-z\s]+$/i,
// message: 'The Password can consist of alphabetical characters only.'
//}
//regexp: {
// regexp: /^[a-z\s]+$/i,
// message: 'The full name can consist of alphabetical characters and spaces only'
// }
}
}
}
})
.on('success.field.fv', function (e, data) {
if (data.fv.getInvalidFields().length = 0) { // There is invalid field
data.fv.disableSubmitButtons(true);
}
});
});
</script>
</head>
<body>
<h2>Login</h2>
<div class="container" style="">
<form id="loginForm" novalidate ng-submit="loginform.$valid && login.submit()"
method="post" class="form-horizontal" data-ng-controller="IMSController">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" data-ng-model="LoginUserName" novalidate />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" data-ng-model="LoginPassword" novalidate />
</div>
</div>
<div class="checkbox" style="margin-removed 292px">
<label><input type="checkbox" data-ng-model="RememberMe"> Remember me</label>
</div>
<br />
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary" ng-click="checkLogin()">Login</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
</div>
</body>
</html>
in that whenever i clicked on the Login buton the ng-click method is executing even though the validation fails..
how can i stop this ..
any help in this regard is highly appreciated.
Thanks in Advance..:)
解决方案
(document).ready(function () {
('#loginForm').bootstrapValidator({ framework: 'bootstrap', excluded: [':disabled'], icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, //err: { // // You can set it to popover // // The message then will be shown in Bootstrap popover // container: 'tooltip' //}, fields: { username: { validators: { notEmpty: { message: 'The username is required' } } }, password: { validators: { notEmpty: { message: 'The password is required' } //}, //regexp: { // regexp: /^[a-z\s]+
/i, // message: 'The Password can consist of alphabetical characters only.' //} //regexp: { // regexp: /^[a-z\s]+
这篇关于Angularjs的Bootstrap验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
