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()">

因此，只有在第一部分為true時，才會調用signIn 。

編輯2

根據此處AngularJS文檔中的信息 ，您也可以嘗試以下方法嗎：

<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並查看修改值后得到的結果。