提问人：audreywrong 提问时间：5/14/2021 更新时间：5/14/2021 访问量：188
如果电话号码无效，则阻止表单提交 - Angularjs
Prevent Form Submit if Phone Number is Invalid - Angularjs
问：
如果电话输入根据我的 ng 模式无效，我想阻止表单提交，而无需在按钮上禁用。我尝试向我的submitForm函数添加逻辑，但无济于事。类似的东西......
在我的 angular 代码中添加验证函数：
const validPhone = function (phone) {
var re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
}
并向我的提交函数添加一些逻辑，例如......
if (!this.validPhone(main.contact.phone)) {
$window.alert("Please a valid phone number!");
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
(function () {
"use strict";
angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
function MainCtrl($document, $timeout, $window) {
var main = this;
main.now = new Date();
main.contact = {
phone: "##phone##",
company: "##company##"
};
main.submitForm = _submitForm;
function _submitForm() {
if (!main.contact.phone) {
$window.alert("Please enter your phone number!");
return false;
}
if (!main.contact.company) {
$window.alert("Please enter your company!");
return false;
}
$timeout(function () {
$document[0].forms[0].submit();
}, 0);
}
}
})();
</script><form method="post" id="f" novalidate name="mainForm">
<div class="input-field">
<input type="text" placeholder="Phone *" value="##phone##" name="phone"
ng-model="main.contact.phone" required
style="margin-bottom: 0; margin-top: 16px"
ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im" />
<small class="form-text rz-error" ng-show="mainForm.phone.$error.required">This
field is
required.</small>
<small class="form-text rz-error" ng-show="mainForm.phone.$error.pattern">
Doesn't look like a valid phone number!</small>
</div>
<div class="input-field">
<input type="text" placeholder="Company *" name="company"
ng-model="main.contact.company" value="##company##" required
style="margin-bottom: 0; margin-top: 16px" />
<small class="form-text rz-error"
ng-show="mainForm.company.$error.required">This field is
required.</small>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="callback_request"
value="yes" style="margin-bottom: 0; margin-top: 16px" />
<label class="form-check-label" for="flexCheckDefault">
I would like a call & a free audit.
</label>
</div>
<div class="input-field">
<input type="submit" class="button alt" value="Download Now"
ng-click="main.submitForm()" style="margin-bottom: 0; margin-top: 16px" />
</div>
<div style="margin-top: 10px">
<small><em class="text-muted">* Denotes a required field.</em></small>
</div>
</form>答：
1赞
Aarón Cárdenas
5/14/2021
#1
执行如下操作：
<form (keydown.enter)="validateFunction($event)"></form>
然后把你的逻辑放在验证函数中，并在需要时执行 $event.preventDefault（）。
评论
1赞
audreywrong
5/21/2021
谢谢你的这个选择，亚伦！我也不想在这里涉及键控逻辑，但这绝对是一种选择。点赞！
0赞
audreywrong
5/14/2021
#2
我从按钮中删除了禁用，并添加了逻辑来检查我的angular.js代码中的有效电话号码：
<script>
(function () {
"use strict";
angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
function MainCtrl($document, $timeout, $window) {
var main = this;
main.now = new Date();
main.contact = {
phone: "##phone##",
company: "##company##"
};
main.submitForm = _submitForm;
main.validPhone = _validPhone;
function _submitForm() {
if (!main.validPhone(main.contact.phone)) {
$window.alert("Please enter a valid phone number!");
return false;
}
if (!main.contact.company) {
$window.alert("Please enter your company!");
return false;
}
$timeout(function () {
$document[0].forms[0].submit();
}, 0);
}
function _validPhone(phone) {
const re =
/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
}
}
})();
</script>
评论