在AngularJS中驗證表單的輸入

我想在將表單傳遞給服務器之前驗證表單的輸入，但它似乎沒有檢查輸入字段，也沒有報告錯誤。我的指令代碼來創建自定義的驗證：在AngularJS中驗證表單的輸入

`var QUERY_REGEXP = /[A-Z,a-z,0-9]{1,20}/; 
app.directive('q', function() { 
return { 
require: 'ngModel', 
link: function(scope, elm, attrs, ctrl) { 
    ctrl.$validators.q = function(modelValue, viewValue) { 
    if (ctrl.$isEmpty(modelValue)) { 

     return true; 
    } 

    if (QUERY_REGEXP.test(viewValue)) { 

     return true; 
    } 

    return false; 
    }; 
    } 
}; 
});`

HTML的一樣：

<div ng-controller="CreditsController">  
    <div style="padding-top:20px" > 
    <form name='form' novalidate> 
    <b>Enter Name:&nbsp;&nbsp;</b><input id="creditq" ng-model='query1' name='query1' type="text" q /> 
    <button id="Submit" ng-click='click()' ng-value='search' required>Search</button><br/><br/> 
    <span ng-show="form.query1.$error.query1">The value is not valid!</span> 
    </form> 
    </div>

我想不出什麼我丟失或做錯了。任何幫助，將不勝感激。

來源

2015-05-20 Anoop

它是否進入$ validators.q函數，或者只是不顯示錯誤？ – HankScorpio

我得到它的工作。 @bgoscinski指出了編碼錯誤。謝謝 – Anoop

我在這裏可以看到幾個問題：

正則表達式：/[A-Z,a-z,0-9]{1,20}/將匹配任何串它由上，下套管字母，數字和昏迷。 {1,20}在這裏不會幫助，因爲你沒有在整個字符串的開始和結束之間指定它必須合適。我覺得你的正則表達式應該是：/^[A-Za-z0-9]{1,20}$/
根據this

與EXEC（）（或與之結合），測試（）呼籲同全球正則表達式的情況下多次將提前過去的比賽。

所以，你有兩個選擇：重新對正則表達式驗證每一個呼叫或在每次調用重置lastIndex屬性0。
您的驗證名爲q所以

<span ng-show="form.query1.$error.query1">The value is not valid!</span>

永遠不會顯示，因爲$error將永遠不會有query1財產。它將被命名爲q作爲您的驗證器。

來源

2015-05-20 22:11:26

感謝您指出我遇到的問題，當我在輸入字段中輸入時，它似乎工作正常，但我希望它通過單擊提交進行驗證，以便值不會通過。任何方式我可以做到這一點？ – Anoop

如果通過_pass through_，則表示您希望表單不被提交，除非驗證成功，您可以檢查'form。$ valid'或'form。$ invalid'屬性。 –

在AngularJS中驗證表單的輸入

回答

相關問題