Несмотря на то, что я не программист, я понимаю, как важно сделать хорошую работу по проверке на переднем крае.
Потому что таким образом, бэкэнд может сделать больше вдох и по сравнению с бэкэнд, фронт действительно может улучшить чувство счастья пользователя.
AngularJS обеспечивает очень удобную функцию проверки формы, запишите ее здесь.
Сначала начните со следующего кода
Кода -копия выглядит следующим образом:
<form ng-app = "myApp" ng-controller = "validationController" name = "mainform" novalidate>
<p> Электронная почта:
<input type = "email" name = "email" ng-model = "email" требуется>
<span style = "color: red" ng-she-semably.email. $ dirty && mainform.email. $ Invalid ">
<span ng-shew = "mainform.email. $ error.required"> требуется электронная почта. </span>
<span ng-shew = "mainform.email. $ error.email"> Неверный адрес электронной почты. </span>
</span>
</p>
<p>
<input type = "отправить" ng-diSablet = "mainform. $ неверно">
</p>
</form>
<Скрипт>
Angular.Module ('myApp', [])
.controller ('ValidationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</script>
Некоторые параметры проверки для входных тегов обычно используются с тегами HTML5.
Необходимый
<input type = "text" требуется />
длина
Используйте директиву ng-minlength/ng-maxlength
<input type = "text" ng-minlength = "5" />
Конкретный формат
Например, электронная почта, URL и номер, просто установите тип на соответствующий тип, например:
Кода -копия выглядит следующим образом:
<input type = "email" name = "email" ng-model = "user.email" />
<input type = "number" name = "age" ng-model = "user.age" />
<input type = "url" name = "HomePage" ng-model = "user.facebook_url" />
Соответствие рисунка
Например, используйте директиву ng-pattern:
Кода -копия выглядит следующим образом:
<input type = "text" ng-pattern = "[az]" />
Свойства формы, эти свойства облегчают работу в формах
нетронутый/грязный
Указывает, был ли он изменен, например,
Кода -копия выглядит следующим образом:
<form name = "mainform" ng-controller = "ordercontroller">
<input type = "email" name = "useremail" ng-model = "myemail" />
{{mainform.useremail. $ pristine}}
{{mainform.useremail. $ Dirty}}
</form>
Доступ в FormName.fieldName. $ PRIDINE, вход должен иметь объявление NG-модели.
Кода -копия выглядит следующим образом:
действительный/недействительный
Указывает, проходит ли это проверка.
Кода -копия выглядит следующим образом:
$ ошибка
Информация о проверке формы, и соответствующая информация возвращается, если проверка не удается.
AngularJS предоставляет CSS -класс соответственно для статуса формы
Кода -копия выглядит следующим образом:
.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid
Например, пусть проверка пройдет зеленый и не сможет красного:
Кода -копия выглядит следующим образом:
input.ng-valid {
Цвет: зеленый;
}
input.ng-invalid {
Цвет: зеленый;
}
В приведенном примере только одна проверка электронной почты написана так много. Если вы добавите несколько полей, добавите несколько разных подсказок и добавите несколько событий, код станет грязным.
На самом деле, это не рекомендуется сделать это, у нас есть лучший способ.
Это использовать Angular-Messages.js
Прежде всего, не забывайте эти два шага
Кода -копия выглядит следующим образом:
<script src = "angular-messages.js"> </script>
Angular.Module ('myApp', ['ngmessages'])
Хорошо, сначала замените эти дубликаты NG-Messages и NG-Message, и приведенный выше пример становится:
Кода -копия выглядит следующим образом:
<form ng-controller = "validationController" name = "mainform">
<p> Электронная почта:
<вход
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" требуется />>>
<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple>
<p ng-message = "требуется"> требуется электронная почта. </p>
<p ng-message = "Электронная почта"> Неверный адрес электронной почты. </p>
<p ng-message = "minlength"> длина мин 10 </p>
<p ng-message = "maxlength"> максимальная длина 50 </p>
</div>
</p>
<p>
<input type = "отправить" ng-disablet = "mainform. $ неверно" />
</p>
</form>
Нет изменений в функции, только дублированный код был удален.
Обратите внимание на различие между NG-Messasges и NG-Messages. Это похоже на ()? NG-Messages-Multiple за ним используется, чтобы сделать несколько подсказок одновременно.
Но этого все еще недостаточно. Даже если содержание в NG-Message опущено, все равно будет дублирование, когда требуется проверка в нескольких областях.
Более того, будут все больше и больше повторяющихся подсказок проверки, если формы на разных страницах включают одинаковое содержание.
Чтобы решить эту проблему, мы можем использовать директиву NG-Messages-Include.
Эта директива используется для ссылки на шаблоны, например, приведенный выше пример становится:
Кода -копия выглядит следующим образом:
<form ng-controller = "validationController" name = "mainform">
<p> Электронная почта:
<вход
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" требуется />>>
<div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<input type = "отправить" ng-disablet = "mainform. $ неверно" />
</p>
</form>
Это не сложно, давайте что -то добавим.
Чтобы сделать подсказки более дружелюбными (?), Мы стараемся достичь эффекта подсказок, появляющихся после листья курсора.
В настоящее время будет намного удобнее использовать директивы. Здесь мы сначала включаем некоторую информацию, связанную с инструкциями.
Сначала запустите его, а затем поговорите об этом:
Кода -копия выглядит следующим образом:
var myApp = angular.module ('myApp', [])
.controller ('ValidationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.directive ('hintonblur', [function () {
возвращаться {
требуется: 'ngmodel',
Ссылка: Функция (Область, элемент, атрис, Ctrl) {
ctrl.focused = false;
element.bind ('Focus', function (evt) {
Scope. $ Apply (function () {ctrl.focused = true;});
}). bind ('blur', function (evt) {
Scope. $ Apply (function () {ctrl.focused = false;});
});
}
}
}]);
Здесь мы используем сфокусированное, чтобы определить, находится ли курсор на определенном свойстве. Когда фокус или размытие происходит на объекте с использованием директивы Hintonblur, состояние фокуса изменилось.
Форма будет изменена следующим образом:
Кода -копия выглядит следующим образом:
<form ng-controller = "validationController" name = "mainform">
<p> Электронная почта:
<input type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" требуется подсказка />>
<div style = "color: red" ng-messages = "mainform.email. $ error" ng-shef = "! mainform.email.cocused" ng-messages-multiple ng-messages-include = "validatemplate/email.html">
</div>
</p>
<p>
<input type = "отправить" ng-disablet = "mainform. $ неверно" />
</p>
</form>
Добавьте суждение, сосредоточенное на NG-SHOW, и подсказка появляется, когда Fall.
Это похоже на это сейчас.
Настройте методы проверки и обоснованность, которые также используют директивы.
Убедитесь, что электронное письмо, которое вы заполнили, занято. Вот простое симуляция:
Кода -копия выглядит следующим образом:
.directive ('isalreadyTaken', function () {
возвращаться {
требуется: 'ngmodel',
Ссылка: функция (Scope, Ele, Attrs, Ctrl) {
ctrl. $ parsers.push (function (val) {
ctrl. $ setVality ('emailavailable', false);
var emailtable = [
для (var i = 0; i <emailtable.length; i+= 1)
if (val == emailtable [i])
возвращаться;
ctrl. $ setVality ('emailavailable', true);
вернуть Вэл;
})
}
}
})
Добавьте атрибут IS-Already Taken в входной элемент и добавьте еще один NG-Message:
Кода -копия выглядит следующим образом:
<p ng-message = "emailAvailable"> уже занимает! Попробуйте другие адреса электронной почты! </p>