AngularJs Form Validation

See some blog said this framework to be outdated, but still learning the next, feel very convenient a framework, the students can see the empty, suitable for us to look at, comparative basis.

For everyday development, the most common development scenario is editing data through forms, and the problem here is validating the problem.

The ANGULARJS built-in support for common authentication methods makes it easy to implement forms validation.

1. Binding

For convenience, we create a model on $scope context object to represent what we are editing.

$scope. Model =  {    id:8,    name: "Alice",    email: "[email protected]"    };

Angularjs validation requires a form's mate, in order to be able to access the form, we need to give the form a name, the corresponding edit item also need to have a name, use the Name property to complete, so that we can access to this edit item. Use Ng-model to implement two-way binding to the model. Of course, submitting data does not require a form.

<form name= "MyForm" >    <div>        <label>id:            <input type= "number" name= "MyId" ng-model= " Model.id "/></label>    </div>    <div>        <label>name:            <input type=" text " Name= "MyName" ng-model= "Model.name"/></label>    </div>    <div>        <label>email:            <input type= "email" name= "Myemail" ng-model= "Model.email"/></label>    </div>    < div>        <button type= "Submit" >Save</button>    </div></form>

Now, running the page, you should see that the contents of the model have been bound to the edit item.

2. Verify the results

Angularjs has built-in support for validation, so now that the form has been validated, what? Why didn't I see any hints? Angularjs Save the validated results on the model and you need to show them yourself on the view.

$valid

Whether the form is validated through the $valid of the form object can be obtained by verifying that it is true and that no pass is false.

<i>myform. $valid: {{myForm. $valid}}</i>

You will see that in fact Angularjs has created an object with the same name as your form on the $scope, so the $valid is actually a property of this object. We use this property to know whether the form has passed validation.

$invalid

This property, contrary to $valid, is not verified as true and passed for false.

What's the use of it?

Considering this scenario, we want the submit button to be available if the form is validated, or disabled without validation, so it can be done.

<button type= "Submit" ng-disabled= "MyForm. $invalid" >Save</button>

That is, $invalid to true is disabled, otherwise enabled.

$pristine

Does the user interact with the form? You can know by $pristine that the user has not edited any of the contents of the form since the page was opened, $pristine returns True, otherwise, returns false.

$dirty

This is just the opposite of $pristine, as long as the form once edited, even if the original content is changed back, it has been modified, the data has become dirty.

$error

In form validation, which validation passed, and which validation failed, you can get detailed information from the $error.

The above states are not only forms, each edit object also has, we can also get each edit object in the above 5 state.

<ul>    <li><i>myform. $valid: {{myForm. $valid}}</i></li>    <li><i> MyForm. $invalid: {{myForm. $invalid}}</i></li>    <li><i>myform. $dirty {{myForm. $dirty}} </i></li>    <li><i>myform. $pristine {myForm. $pristine}}</i></li>    <li><i>myform. $error {myForm. $error}}</i></li></ul><ul>    <li>< I>myform.myname. $valid {myform.myname. $valid}}</i></li>    <li><i>myform.myname.$ Error {{myform.myname. $error}}</i></li></ul>

3. Verification

What can angularjs verify?

Can be divided into basic validation and advanced validation two parts

Basic validation

Basic validation refers to the method of authentication provided directly by HTML5, such as the validation that must be provided, which is represented by the required attribute in the HTML5.

In addition, the type attribute of the INPUT element actually validates the data type, such as when entering an e-mail address, it should obviously contain an @ symbol.

These types are as follows:

• Number
• Email
• Url
• Text
• CheckBox
• Radio

Advanced authentication

Basic validation is clearly not sufficient, and ANGULARJS provides its own advanced validation instructions. These directives support expressions.

Ng-minlength

You'll know at a glance, to set the minimum length

Ng-maxlength

Set Maximum length

<input type= "text" name= "MyName" Required ng-minlength= "3" ng-maxlength= "6" ng-model= "Model.name"/>

Ng-required

Required not been provided in the HTML5? This can be implemented dynamically whether it is necessary, you can bind a model to indicate whether this edit box must now.

Whether the settings must be set on the model.

$scope. Requirevalue = true;

Then, dynamically bind to the element

<input type= "text" name= "MyName" ng-model= "Model.name" ng-required= "Requirevalue"/>

Ng-pattern

The front is too simple? Give you a regular you can always, just see your regular skill.

For example, if you want to verify that the input is 0-9 numbers, you can either write a regular expression constant or bind a variable.

$scope. Matchpattern =/\d+/;

The view.

<input type= "text" name= "MyName" ng-model= "Model.name" ng-required= "Requirevalue" ng-minlength= "3" ng-maxlength= " 6 "ng-pattern="/\d+/"/><input type=" text "name=" MyName "ng-model=" Model.name "ng-required=" Requirevalue " Ng-minlength= "3" ng-maxlength= "6" ng-pattern= "Matchpattern"/>

Note that in JavaScript,/\d+/represents a regular expression object.

Ng-change

If you want to be notified immediately when your edits change, so you can do your own processing, using Ng-change, unlike standard HTML elements, the expression is executed immediately after the content changes, not when the user exits the edit.

$scope. myidchanged = function (model) {    console.info (model);};

Using Ng-change

<input type= "number" name= "MyId" ng-model= "model.id" Required ng-change= "myidchanged (model)"/>

4. Verify the style of the result

When the edit item is validated, ANGULARJS will add the appropriate style to the edited item, with the result of the validation.

• . ng-pristine
• Ng-dirty
• Ng-valid
• Ng-invalid

You can use these styles to modify the editing items.

5. Display error message

The error message can be pre-added to the corresponding location of the page, not displayed by default, and the corresponding error message is displayed without the corresponding verification.

The Ng-show and Ng-hide directives enable you to determine whether to display element content based on the results of the binding expression.

Ngshow and Nghide allow us to show or hide different elements. This helps when creating angular applications because our single-page program has many moving parts that come and go as the application state changes.

The great part of these instructions is that we don't have to use CSS or JS to manipulate the display or hide it. These are all done by seasoned angular.

<span ng-show= "myForm. $invalid" > Form validation Failure </span>

5. Unified processing of validation error messages

You can write a function that handles all error messages uniformly.

Uniformly handles all error message $scope.geterrormessage = function (Error) {    if (angular.isdefined (Error)) {if (        error.required {            return "Please enter a value!";        }        else if (error.email) {            return "Please enter a valid email address!";        }}    ;

Then, bind the function in the view

<span ng-show= "MyForm. $invalid" >{{geterrormessage (myForm. $error)}}</span>

From the Great God: http://www.cnblogs.com/haogj/p/4244143.html

AngularJs Form Validation