Zatwierdzanie formularza/pola Angularjs przy użyciu funkcji JavaScript bez dyrektyw

Question

Czy istnieje sposób sprawdzania poprawności pola w kancie bez użycia dyrektywy? Na przykład: chcę dokonać sprawdzania poprawności w polu wprowadzania.

• Jeśli pole jest puste, powinien pojawić się komunikat "Pole musi zawierać wartość".
• jeśli pole zawiera alfa Znaki liczbowe powinny być wyświetlane "Pole może zawierać tylko cyfry".
• Liczba EVEN - wiadomość do użytkownika "Wartość musi być liczbą parzystą".

Chcę dokonać następującej walidacji w wywołaniu funkcji JavaScript.

Przeszukałem i zobaczyłem, że istnieje sposób na użycie błędu ng-valid i $, jednak nie udało mi się go uruchomić.

Kod poniżej jest według jednej z odpowiedzi dostałem:

<div ng-app> 
<form name='theForm' novalidate> 
    <input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/> 
    <span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span> 
    <span ng-show='theText.length<1'>Field must contain a value</span> 
    <span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span> 
    <br/><input type='submit' value='Submit' /> 
</form> 

chcę wziąć to, co wewnątrz ostatniego [rozpiętości] i umieścić wewnątrz funkcji JavaScript, aby uczynić go bardziej generyczne i ostatecznie zmieniają tylko JS, a nie HTML, gdy zmieniają się warunki

Czy ktoś może doradzić? przykład pracy byłby świetny.

Answer 1

Jestem zaskoczony nikt nie wspomniał ui-validate

$scope.isOdd = function($value){ 
    return $value % 2; 
} 
... 
<form name="myform"> 
    <input ng-model="myVal" name="value" required 
    ng-pattern="/^[0-9]*$/" ui-validate=" 'isOdd($value)' "></input> 
    <pre>{{myform.value.$error|json}}</pre> 
</form> 

Nie było prostsze, że i to jest walidacja PROPER angularjs (nie głupie zegarki)

Here's a working demo

Answer 2

Zapoznaj się z dokumentacją formularza angularjs - http://docs.angularjs.org/guide/forms. Zasadniczo jest on oparty na atrybutach HTML5, takich jak wymagany, min, max, itp.

Aby uzyskać na przykład pierwsze wykonane zadanie - "puste pole powinno być wyświetlane" Wiadomość musi zawierać wartość ", yo . uwould zrobić coś takiego:

<input type="text" ng-model="user.name" name="uName" required /><br /> 
<div ng-show="form.uName.$invalid"> 
    <span ng-show="form.uName.$error.required">Field must contain a value.</span> 
</div> 

Dla cyfr tylko pola można użyć atrybutu pattern z dopasowania wyrażenia regularnego (przykład: http://www.wufoo.com/html5/attributes/10-pattern.html)

Dla jeszcze walidacji liczb, nie jestem pewien - ja myślę, że musisz przejść do tego z niestandardową walidacją (co oznacza, że ​​musisz stworzyć dyrektywę) lub użyć pattern jakoś.

Last but not least - pamiętaj, aby dodać novalidate do tagu <form>. W przeciwnym razie przeglądarka spróbuje zweryfikować również swoje pola i nie chcesz, aby:

<form ... novalidate> 
... 
</form> 

Answer 3

Cóż można spróbować utworzyć func

<span ng-show='isEven(theText)'>Value must be an even number</span> 

$scope.isEven=function(data) { 
    if(data) { 
     return data%2===0 
    } 
    return true; 
} 

Metoda może być albo określona na prąd zasięg kontrolera lub $ rootScope.

Niezbyt kanciasty sposób, ponieważ dyrektywy byłyby lepsze, ale myślę, że zadziała.

Answer 4

wiem pytanie jest stare i wiem, że nie chciałaś dyrektywy, ale możesz rozważyć zastosowanie dyrektywy, jeśli jest to metoda "kątowa" ... Tutaj jest moja Angular-Validation. Zrobiłem projekt na Githubie i myślę, że to po prostu skaluje się w porównaniu do tego, co jest/było dostępne ... Oparłem się na doskonałej strukturze PHP Laravel i udostępniłem ją pod Angular ... To jest tak szalone proste, potrzebujesz 2 linie 1 linia kodu, 1 linia dla wejścia, 1 linia do wyświetlania błędów, to wszystko ... nigdy więcej i nigdy mniej !!! Dość powiedzieć, dajmy kilka przykładów:

<!-- example 1 --> 
<label for="input1">Email</label> 
<input type="text" validation="email|min_len:3|max_len:25|required" ng-model="form1.input1" name="input1" /> 

<!-- example 2 --> 
<label for="input2">Alphanumeric + Exact(3) + required</label> 
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" /> 

Tak można zdefiniować niezależnie od ilości reguł walidacji (już 25+ typ zatwierdzającym), które chcę w prosty dyrektywy validation="min_len:2|max_len:10|required|integer" i komunikat błędu będzie zawsze wyświetlenia w następnym <span> Nie podoba ci się to już? 1 linia kodu dla twojego wejścia, 1 linia kodu dla wyświetlania błędu, nie możesz być prostszy niż ... oh i nawet wspieram twój Regex, jeśli chcesz dodać. Kolejny bonus, obsługuję również dowolne zdarzenie wyzwalające, najczęściej są to: onblur i onkeyup. Och i ja również obsługuję wiele języków lokalizacji za pośrednictwem zewnętrznych plików JSON. Naprawdę dodałem wszystkie wyobrażalne funkcje, które chciałem do jednej zwariowanej prostej dyrektywy.
Koniec klastra Formularz z 10 liniami kodu dla 1 wejścia (przykro, ale zawsze okazało się, że trochę ekstremalnie), gdy jedyne czego potrzebujesz to 2 linie, nie więcej, nawet dla wejścia z 5 weryfikatorami na nim. I nie martw się, że forma nie stała się nieważna, ja też się tym zajmuję, wszystko to jest obsługiwane w dobry sposób "Angular".

Spójrz na mojego projektu GitHub Angular-Validation ... Jestem pewien, że pokochasz go =)

UPDATE
Kolejnym bonusem cukierki! Aby jeszcze bardziej ułatwić użytkownikowi pracę, dodałem walidację timera. Koncepcja jest prosta, nie zawracaj sobie głowy użytkownikiem podczas pisania, ale sprawdzaj, czy robi pauzę lub zmienia dane wejściowe (onBlur) ... Uwielbiam to !!!
Można nawet dostosować zegar zgodnie z własnymi upodobaniami, postanowiłem ustawić go na 1 sekundę w ramach dyrektywy, ale jeśli chcesz dostosować, możesz zadzwonić na przykład jako typing-limit="5000", aby uzyskać 5 sekund. koniec czasu. Pełny przykład:

<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" /> 
<span class="validation text-danger"></span> 

UPDATE # 2
Dodano także mecz wejście walidacji potwierdzenia (np .: potwierdzenie hasła), oto przykładowy kod

<!-- input match confirmation, as for example: password confirmation --> 
<label for="input4">Password</label> 
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required" /> 
<label for="input4c">Password Confirmation</label> 
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required" /> 

Aktualizacja # 3
Uregułowano dyrektywę tak, że wymóg posiadania <span> do wyś wietlania błę du jest zbę dny, dyrektywa obsługuje teraz samodzielnie, zobacz co de zmiana odzwierciedlona na górze.

DEMO
Dodany live demo na Plunker