HTML5电子邮件验证避免了js调用

时间:2017-08-15 14:39:02

标签: javascript html5

我有以下代码:

<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>

上面代码的问题是即使HTML5端存在电子邮件验证错误,也会调用signIn()方法。一般来说,如果只有在表单的所有输入验证成功时才确保调用signIn()方法?

1 个答案:

答案 0 :(得分:2)

使用$pristine查看表单是否为空,并$invalid查看表单是否已填充但是包含无效值(例如,可能是错误的电子邮件)。

<form name="myForm">
    <input type="email" name="email" ng-model="email" required />
    <button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>

现在,您的提交按钮将被禁用(不可点击),直到您的表单有效。

修改

要仅使用HTML5验证进行验证,请在表单中添加name属性,并在提交期间访问其有效性:

<form name="myForm">...</form>

$scope.signIn = function(){
    if ($scope.myForm.$valid){
        // do sign in logic here
    }
}

甚至可以在提交按钮上内联逻辑(如果有效):

<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">

所以只有在第一部分为真时才会调用signIn

编辑2

根据AngularJS docs here上的信息,您还可以尝试以下操作吗?:

<form name="myForm">
    <input type="email" name="email" ng-model="email" required />
    <button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>

$scope.signIn = function () {
    if ($scope.myForm.email.$error.required) {
        // ...
    }
}; 

我们现在遵循$scope.myForm.email.$error.required语法方法。

尝试记录$scope.myForm$scope.myForm.email并查看修改值时获得的内容。