Проверка формы / поля Angularjs с использованием функции JavaScript без директив
Есть ли способ проверить поле в угловых без использования директивы? Например: я хочу сделать следующую проверку в поле ввода.
- Если поле пустое, мы должны показать сообщение "Поле должно содержать значение".
- если поле содержит буквенно-цифровые символы, мы должны показать "Поле может содержать только цифры".
- ДАЖЕ число - сообщение пользователю "Значение должно быть четным числом".
Я хочу сделать следующую проверку при вызове функции JavaScript.
Я погуглил и увидел, что есть способ использовать ng-valid и $ error, однако мне не удалось заставить его работать.
Код ниже соответствует одному из полученных ответов:
<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>
Я хочу взять то, что внутри последнего [span], и поместить в функцию JavaScript, чтобы сделать ее более общей и, в конечном итоге, изменять только JS, а не HTML, когда меняются условия
Может кто-нибудь, пожалуйста, посоветуйте? рабочий пример был бы великолепен.
4 ответа
Я удивлен, что никто не упомянул 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>
Не проще, чем это, и это PROPER AngularJS проверки (не глупые часы)
Я знаю, что вопрос старый, и я знаю, что вам не нужна директива, но вы можете подумать об использовании директивы, если она "угловая"... Что ж, вот моя угловая проверка. Я сделал проект на Github, и я думаю, что он просто великолепен по сравнению с тем, что есть / было доступно... Я основал себя на превосходном Laravel PHP Framework и сделал его доступным в Angular... Это настолько просто, что вам нужно 2 строки 1 строка кода, 1 строка для ввода, 1 строка для отображения ошибок, вот и все... никогда больше и никогда меньше!!! Достаточно сказать, давайте приведем несколько примеров:
<!-- 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" />
Таким образом, я могу определить любое количество правил валидации (уже более 25 типов валидаторов), которые я хочу, в простой директиве validation="min_len:2|max_len:10|required|integer" и сообщение об ошибке всегда будет отображаться в следующем <span> Вам, ребята, уже не нравится? 1 строка кода для вашего ввода, 1 строка кода для отображения ошибки, вы не можете быть проще этого... о, и я даже поддерживаю ваш пользовательский Regex, если вы хотите добавить. Еще один бонус, я также поддерживаю любое событие триггера вы хотите, наиболее распространенными являются, вероятно, onblur а также onkeyup, Да, и я также поддерживаю несколько языков локализации через внешние файлы JSON. Я действительно добавил все мыслимые функции, которые хотел, в одну безумную простую директиву.
Больше не нужно кластеризованной формы с 10 строками кода для 1 ввода (извините, но всегда находил это немного экстремальным), когда вам нужно только 2 строки, не более, даже для ввода с 5 валидаторами. И не беспокойтесь о том, что форма не станет недействительной, я тоже об этом позаботился, все это обрабатывается хорошим "угловым" способом.
Взгляните на мой проект Github Angular-Validation... Я уверен, вам понравится =)
ОБНОВИТЬ
Еще один конфетный бонус! Чтобы сделать пользовательский интерфейс еще более плавным, я добавил проверку по таймеру. Концепция проста: не мешайте пользователю, пока он печатает, но проверяйте, делает ли он паузу или меняет ввод (onBlur)... Любите это!!!
Вы можете даже настроить таймер по своему вкусу, я решил установить значение по умолчанию равным 1 секунде в директиве, но если вы хотите настроить его, вы можете вызвать, например, как typing-limit="5000" сделать 5 сек. тайм-аут. Полный пример:
<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" />
<span class="validation text-danger"></span>
ОБНОВЛЕНИЕ № 2
Также добавлено подтверждение подтверждения ввода (например: подтверждение пароля), вот пример кода
<!-- 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" />
ОБНОВЛЕНИЕ № 3
Реорганизовал директиву так, чтобы требование наличия <span> для отображения ошибки нет необходимости, директива теперь обрабатывает ее сама, см. изменение кода, отображаемое сверху.
DEMO
Добавлена живая демоверсия на Plunker
Взгляните на документацию формы angularjs - http://docs.angularjs.org/guide/forms. Как правило, он основан на атрибутах HTML5, таких как обязательные, минимальные, максимальные и т. Д.
Например, чтобы выполнить ваше первое требование - "пустое поле должно отображать сообщение" Поле должно содержать значение "", вы должны сделать что-то подобное:
<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>
Для поля только цифры вы можете использовать pattern атрибут с соответствующим регулярным выражением (пример: http://www.wufoo.com/html5/attributes/10-pattern.html).
Я не уверен, что для проверки четного числа - я думаю, что для этого вам нужно будет выполнить специальную проверку (то есть создать директиву) или использовать pattern приписать как-нибудь.
Последнее, но не менее важное - не забудьте добавить novalidate к <form> тег. В противном случае браузер также попытается проверить ваши поля, а вы этого не хотите:
<form ... novalidate>
...
</form>
Ну, вы можете попробовать создать функцию
<span ng-show='isEven(theText)'>Value must be an even number</span>
$scope.isEven=function(data) {
if(data) {
return data%2===0
}
return true;
}
Метод может быть определен либо в текущей области контроллера, либо в $rootScope.
Не очень сложный способ, так как директивы были бы лучше, но я думаю, что это сработало бы.