Подтвердить что ты не робот

Как упростить проверку формы?

Приведенный ниже код, похоже, очень хорошо подходит для выполнения основной необходимой проверки формы.

Форма отображает красное имя, требуемое сообщение, когда поле грязно + недействительно и отлично! если поле грязное + действительное.

Но это беспорядок, повторяющий этот код для каждого поля в форме:

<form name="myForm">
    <div class="control-group" 
     ng-class="{error: myForm.name.$invalid && myForm.name.$dirty}">
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required/>
        <span ng-show="myForm.name.$invalid && myForm.name.$dirty" 
            class="help-inline">Name is required</span>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

Я хотел бы указать несколько атрибутов ng-show и ng-class.

4b9b3361

ОТВЕТЫ

Ответ 1

Один из способов сделать это - абстрагировать выражение валидации методам scope:

PLUNKER

HTML

<div class="control-group" ng-class="{error: isInvalid('name')}">
  <label>Name:</label>
  <input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
  <span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
  <span ng-show="isValid('name')">Great!</span>
</div>

контроллер

function Ctrl($scope) {
  $scope.isInvalid = function(field){
    return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
  };

  $scope.isValid = function(field){
    return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
  };

}

Ответ 2

Я знаю, что вопрос старый, но я хочу поделиться с миром своей замечательной новой директивой angular, я сделал проект на Github, и я думаю, что он просто скалы по сравнению с тем, что есть/был доступен... Я основывался на я на отличной Laravel PHP Framework и сделал его доступным в Angular... Достаточно сказал, давайте приводим несколько примеров:

<!-- example 1 -->
<label for="input1">Simple Integer</label>
<input type="text" validation="integer|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" />

Итак, я могу определить любое количество правил проверки, которые я хочу в простой директиве validation="min_len:2|max_len:10|required|integer", и сообщение об ошибке всегда будет отображаться в следующем <span>. Разве вам это не нравится? 1 строка кода для ввода, 1 строка кода для отображения ошибки, вы не можете быть проще, чем это... о, и я даже поддерживаю ваше пользовательское Regex, если вы хотите добавить:)

Больше не кластеризованная форма с 10 строками кода для 1 входа, когда единственное, что вам нужно, это 2 строки, не более, даже для ввода с 5 валидаторами на нем. И не беспокойтесь о том, что форма не становится недействительной, я тоже позаботился об этом, все это обработало хороший путь.

Взгляните на мой проект Github Angular-Validation и распространите слово =)

ИЗМЕНИТЬ
Чтобы сделать еще более гладкий пользовательский интерфейс, я добавил проверку на таймер. Концепция проста, не беспокойтесь о пользователе, когда он занят печатанием, но подтвердите, делает ли он паузу или ввод изменений (onBlur)... Любите это!!!
Вы даже можете настроить таймер по своему вкусу, я решил установить его по умолчанию на 1 секунду в директиве, но если вы хотите настроить, вы можете вызвать, например, typing-limit="5000", чтобы сделать 5 секунд. тайм-аут. Полный пример:

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


ИЗМЕНИТЬ № 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> для отображения ошибки не было необходимости, директива теперь обрабатывает ее сама по себе, см. Изменение кода, отраженное сверху.

ДЕМО
Добавлена ​​живая демонстрация на Plunker

Ответ 3

Пожалуйста, используйте этот CSS

.myForm input.ng-invalid.ng-dirty {
    background-color: #FA787E;
}

.myForm input.ng-valid.ng-dirty {
    background-color: #78FA89;
}

Ответ 4

Вы можете использовать Angular-Validator.

Он будет

  • Отобразить требуемое сообщение об ошибке красным цветом (необязательно с помощью классов начальной загрузки)
  • Отметьте поле как недопустимое, если оно не прошло проверку.
  • Предотвращать отправку формы, пока она недействительна
  • Показывать только сообщение, если поле загрязнено
  • Очистите свой код!

Это не будет

  • Отобразить сообщение об успешном завершении (скоро появится поддержка сообщений об успешном завершении).

Пример

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
    </div>
</form>

Работа для показа успешного сообщения:

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

Подробнее Angular - примеры использования и примеры.

Отказ от ответственности: я являюсь автором Angular -Validator

Ответ 5

В github существует директива angular, называемая xtForm. Похоже, что это неплохо начать проверку поля angular. XtForm уменьшает количество разметки сообщения проверки после ваших входных тегов.

Ссылка на демонстрационный сайт https://github.com/refactorthis/xtform

небольшой пример использования. Никакой дополнительной разметки (ng-show on spans), необходимой для получения этого поля, требуется сообщение об ошибке/подсказка.

<form xt-form novalidate>
  <input name="email" ng-model="modelVal" xt-validate required>
  <button type="submit">Submit</button>
</form>

Ответ 6

Подумайте об использовании этого модуля ngValidate, над которым я работал.

<input name="demo-field-1" ng-model="user.name" ng-validate="customStrategy">

В директиве будет добавлен диапазон для хранения сообщений об ошибках. Вы можете определить собственные стратегии проверки и отдельные сообщения об ошибках.

ngValidateFactory.strategies.customStrategy = [
{
    value:ngValidate.required;
    message:"This field is required"
},
{
    value:[ngValidate.minLength,8];
    message:"Minimum 8 characters are required"
},
{
    value:[myFunction,arg1,arg2];
    message:"This field fails my custom function test"
}]

демо plnkr

Ответ 7

Попробуйте этот HTML:

<form name="myForm" ng-submit="submitForm()" novalidate>

            <!-- NAME -->
            <div class="form-group" ng-class="{'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">
                <label>Client Name</label>
                <input type="email" name="email" class="form-control" ng-model="formValues.userName" required placeholder="User Name">
                <p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="error">Your email is required.</p>
            </div>


            <div class="form-group">
                <label >Password</label>
                <input type="password" name="formValues.password" class="form-control" placeholder="Password" ng-model="formValues.password" ng-maxlength="6" required>
            </div>
            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" name="formValues.confirmPassword"  class="form-control"  placeholder="Confirm Password" ng-model="formValues.confirmPassword" required>
                <span class="error" ng-if="formValues.confirmPassword" ng-show="formValues.password!=formValues.confirmPassword">password should not match</span>
            </div>

            <div class="form-group">
                <label>First Name</label>
                <input type="text" name="formValues.firstName"  class="form-control" placeholder="First Name" ng-model="formValues.firstName" ng-keyup="acceptAlphabets(formValues.firstName,$event)" required>
                <span class="error"  ng-show="myString">Accept only letters</span>
                <span class="error" ng-show="myStringLength">Accept only 50 characters</span>
            </div>

            <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="formValues.larstName" class="form-control"  placeholder="Last Name" ng-model="formValues.larstName" required>

            </div>
            <div class="form-group">
                <label>Date Of Birth</label>
                <input type="text" name="formValues.dateOfBirth" class="form-control" id="exampleInputPassword1" placeholder="Date Of Birth" ng-model="formValues.dateOfBirth" ng-keyup="dateFun(formValues.dateOfBirth,$event)" required>
                <span class="error" ng-show="dateVal">Incorrect Format, should be MM/DD/YYYY</span>

            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-model="formValues.submit">Submit</button>

        </form>

Ответ 8

<form ng-app="demoApp" ng-controller="validationCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Your Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Your Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>Mobile:<br>
<input type="number" name="number" ng-model="number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Your Phone is required.</span>
<span ng-show="myForm.number.$error.number">Invalid number.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>

<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
    $scope.user = 'angular';
    $scope.email = '[email protected]';
});
</script>

Ответ 9

Вероятно, я слишком поздно задал вопрос, но вы можете использовать внешнюю библиотеку для проверки валидации. Angular form validator (написанный мной) упрощает использование нескольких стандартных валидаторов, таких как

  • Обязательно
  • Строка (минимальная/максимальная длина)
  • Число (минимальное/максимальное значение)
  • Шаблон
  • Email
  • Url
  • Равно (для проверки почты/паролей)
  • Пользовательский (где вы можете подключить собственную проверку)

И это позволяет объединить несколько валидаторов в одно поле.

<form name="introform" ng-controller="intro">
    <div class="form-group" validator="required['Field is required'],string[5,20,'Should between 5 and 20 characters']">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

Ответ 10

Посмотрите мою форму выражения angularJS на ссылка на пробную версию

Я показал пример, как проверить требуемые, minlength, maxlength, email, пароль, подтвердить совпадение пароля на моей демонстрации.

Вот код:

var myApp = angular.module('myApp',[]);
myApp.controller('mainController',['$scope', function($scope) {
	
}]);
myApp.directive('validConfirmPassword', function() {
	return {
		require:'ngModel',
		link: function(scope, elem, attrs, ctrl) {
			ctrl.$parsers.unshift(function(viewValue, $scope) {
				var noMatch = viewValue != scope.myForm.password.$viewValue;
				ctrl.$setValidity('noMatch', !noMatch)
			})
		}
	}
})	
.content{ margin-top:50px;  }
.danger-text { color: red; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">AngularJS Form Validation</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

	<div class="container content" ng-controller="mainController">
		<div class="row">
			<div class="col-sm-12">
				<form name="myForm" novalidate>
					<div class="row">
		    			<div class="col-md-6 mb-3">
							
								<label for="first_name">First Name</label>
								<input type="text" name="firstname" ng-model="firstname" id="firstname"  class="form-control" required>
								<p ng-show="myForm.firstname.$touched && myForm.firstname.$invalid" class="danger-text">Please enter your first name</p>	
							
						</div>
						<div class="col-md-6 mb-3">
							
								<label for="last_name">Last Name</label>
								<input type="text" name="last_name" ng-model="last_name" id="last_name"  class="form-control"  required>
								<p ng-show="myForm.last_name.$invalid && myForm.last_name.$touched" class="danger-text">Please enter your last name</p>
							
						</div>
					</div> <!-- End of row -->
					<div class="row">
						<div class="col-md-6 mb-3">
							<label for="username">Username</label>
							<input type="text" name="username" id="username" ng-model="username" class="form-control" ng-required="true" ng-minlength="4" ng-maxlength="10" >
							<p ng-show="myForm.username.$error.required && myForm.username.$touched" class="danger-text">Please enter username</p>
							<p ng-show="myForm.username.$error.minlength" class="danger-text">Username is too short</p>
							<p ng-show="myForm.username.$error.maxlength" class="danger-text">Username is too long</p>
						</div>
						<div class="col-md-6 mb-3">
							<label for="email">Email</label>
							<input type="email" name="email" id="email" class="form-control" ng-model="email">
							<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="danger-text">Enter a valid email address</p>
						</div>
					</div> <!-- ENd of row -->
					<div class="row">
						<div class="col-md-6 mb-3">
							<label for="password">Password</label>
							<input type="password" class="form-control" id="password" name="password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required  />
   <p class="danger-text" ng-show="myForm.password.$error.required && myForm.password.$touched">Password is required</p>
   <p class="danger-text" ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</p>
   <p class="danger-text" ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
						</div> <!-- End of col md 6 -->
						<div class="col-md-6 mb-3">
							<label>Confirm Password</label>
							<input type="password" id="confirm_password" name="confirm_password" class="form-control" ng-model="confirm_password" valid-confirm-password required  />
   <p class="danger-text" ng-show="myForm.confirm_password.$error.required && myForm.confirm_password.$dirty">Please confirm your password.</p>
   <p class="danger-text" ng-show="!myForm.confirm_password.$error.required && myForm.confirm_password.$error.noMatch && myForm.password.$dirty">Passwords do not match.</p>
						</div>
					</div> <!-- ENd of row -->
					<div class="row">
						<div class="col-md-12">
							<button type="submit"  class="btn btn-primary">Submit</button>
						</div>
					</div>
				</form> <!-- End of form -->
			</div> <!-- End of col sm 12 -->
		</div> <!-- End of row -->
	</div> <!-- End of container -->
  </div>

Ответ 11

index.php

<form class="add-task" id="myForm" name="myForm" method="post" ng-submit="submitForm(myForm.$valid)" novalidate>
   <div class="form-actions">
      <!-- ng-patten for validation -->
      <span class="error" ng-show="myForm.username.$error.required">
      Required!</span> 
      <div class="input-group">
         <input type="text"  ng-model="user2.username"  name="username" ng-pattern="example.word" placeholder="User Name" required>
         <input  type="password"  ng-model="user2.password"   name="password" placeholder="user password" ng-minlength="4"
            ng-maxlength="10" required>
         <button class="btn btn-success" ng-show="displayadd" type="submit"  ng-click="addUser(user2)" ng-disabled="myForm.$invalid"><i class="glyphicon glyphicon-plus"></i> Add New user</button>
         <button class="btn btn-default" ng-show="displayupdate"  ng-click="updateUser(user2)" value="Update"ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-save"></span>Save Change</button>
         <p style="color:red" ng-show="myForm.password.$error.minlength" class="help-block">Password Is Very Short.</p>
         <p style="color:red"  ng-show="myForm.password.$error.maxlength" class="help-block">Password Is Very Long.</p>
      </div>
   </div>
</form>

В app.js включить эту функцию:

 $scope.submitForm = function() {
     if ($scope.myForm.$valid) {
         alert('Our Form Is Submited....');
     }
 };