"AngularJs"---form validation

1. Required Fields

Verify that a form input is filled in, as long as you add the HTML5 tag to the input field element required:

<type= "text"/>

2. Minimum length
Verify that the form input text length is greater than a minimum value, use the ANGULARJS directive on the input field

Ng-minleng= "{Number}":

<type= "text"  ng-minlength= "5"/>

3. Maximum length
To verify that the text length entered by the form is less than or equal to a maximum value, use the ANGULARJS directive on the input field
Ng-maxlength= "{Number}":

<type= "text"  ng-maxlength= "/> "

4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:

<type= "text"  ng-pattern= "[A-za-z]"/>

5. Email
Verify that the input is an e-mail message, as long as you set the type of input to email as follows:

<type= "email  " name= "email"  ng-model= " User.email "/>

6. Digital
Verify that the input is numeric and set the type of input to number:

<type= "number"  name= "Age"  Ng-model = "User.age" />

7. URL
Verify that the input is a URL and set the type of input to a URL:

<type= "url"  name= "homepage"  ng-model= " User.facebook_url "/>

8. Controlling variables in forms
The attributes of the form can be accessed in the $scope object to which they belong, and we can access the $scope object, so
JavaScript can indirectly access form properties in the DOM. With these attributes, we can make the form real-time (and
Angularjs other things) in response. These properties include the following.
(Note that these properties can be accessed using the following format.) ）
--formname.inputfieldname.property

• Non-modified form

This is a Boolean property that is used to determine whether the user has modified the form. If not modified, the value is true if the value has been modified
to false:
Formname.inputfieldname. $pristine

• Modified form

This value returns true whenever the user modifies the form, regardless of whether the input passes validation:
Formname.inputfieldname. $dirty

• Legal Forms

This Boolean property is used to determine whether the contents of the form are legitimate. If the current form content is legal, the following property's
The value is true:
Formname.inputfieldname. $valid

• Illegal forms

This Boolean property is used to determine whether the contents of the form are illegal. If the current form content is not valid, the following property's
Value is true:
Formname.inputfieldname. $invalid

• Error

This is another very useful property provided by Angularjs: $error object. It contains all the validations for the current form
Content, and whether they are legitimate information. Use the following syntax to access this property:
Formname.inputfieldname. $error

If the validation fails, the value of this property is true, and if the value is false, the value of the input field passes the validation

eg

<formname= "MyForm">  <inputname= "Personemail"Required Type= "Email"Ng-model= "Person.email"/>  <spanNg-show= "!myform.personemail. $valid">Wrong</span>  <spanNg-show= "Myform.personemail. $error. Required">Required Fields</span>  <spanNg-show= "Myform.personemail. $error. Email">Wrong email address</span></form>

9. Some useful CSS styles
Angularjs when processing a form, some CSS classes are added based on the current state of the form (for example, it is currently legal, not occurring
Changes, and so on), the names of these CSS classes are similar to the properties described earlier.
They include:
. Ng-pristine {}
. Ng-dirty {}
. Ng-valid {}
. Ng-invalid {}
They correspond to the specific state of the form input field.
When the input in a field is illegal, the. Ng-invlid class is added to this field. The site in the current example will
The corresponding CSS style is set to:
Input.ng-invalid {
border:1px solid red;
}
Input.ng-valid {
border:1px solid Green;
}

"DEMO"

<formname= "Lg_form"Ng-submit= "Login ()">            <ion-contentclass= "padding lg-padding">                <Divclass= "List">                    <Divclass= "List List-inset">                        <labelclass= "Item Item-input">                            <inputtype= "text"placeholder= "username"Ng-model= "User.username"Ng-maxlength= "8"Required/>                        </label>                        <labelclass= "Item Item-input">                            <inputtype= "Password"placeholder= "Password"Ng-model= "User.password"Ng-maxlength= "8"Required/>                        </label>                    </Div>                </Div>                <Divclass= "padding">                    <Buttonng-disabled= "Lg_form. $invalid"class= "button Button-block button-large button-clear button-positive"type= "Submit">Login Now</Button>                </Div>            </ion-content>    </form>

The submitted method is bound to the login function in the controller via Ng-submit.

"AngularJs"---form validation