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

Question

我有以下代码：

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

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

Answer 1

使用$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并查看修改值时获得的内容。