Form validation in Angularjs

Angular has encapsulated the HTML native form, adding a lot of validation features

1. Code structure

<form name= "Signup_form" Novalidate ng-submit= "Signupform ()" > <div> <label> User name </lab el> <input type= "text" placeholder= "name" name= "name" ng-model= "Signup.name" ng-minlength=3 ng-maxlength= Required/> <div class= "error" ng-show= "Signup_form.name. $dirty && signup_form.name. $invalid" &                Gt <small ng-show= "Signup_form.name. $error. Required" > name required </small> <small ng-show= "SIGNUP_FORM.N Ame. $error. minlength "> name minimum three characters </small> <small ng-show=" Signup_form.name. $error. maxlength "> Name Up to 20 characters </small> </div> </div> <div> <label> password </label&            Gt <input type= "text" placeholder= "name" name= "name" ng-model= "Signup.name" ng-minlength=3 ng-maxlength=20 required/     > <div class= "error" ng-show= "Signup_form.name. $dirty && signup_form.name. $invalid" >           <small ng-show= "Signup_form.name. $error. Required" > Password required </small> <small ng-show= "Si Gnup_form.name. $error. minlength "> Password minimum three characters </small> <small ng-show=" Signup_form.name. $error. maxle Ngth "> Password up to 20 characters </small> </div> </div> <button type=" Submit "ng-disabled=" Signup_form. $invalid "class=" button radius "> Submit </button> </form>

2. If you want to use angular form validation, first make sure that the form must have a property of name all input fields can be basic verified, such as maximum, minimum length, etc. These features are provided by H5 's form properties, and you can add novaildate tags to your form if you want to mask the browser's default validation behavior for forms.

Validation of 3.H5

Required Fields:验证表单输入是否已经添加 之前在dom元素上加上required标记即可

<input type= "Text" required/>

Maximum/Small length:验证表单输入的文本是否小/大于某个最小值，可以在输入的字段上使用指令 ng-maxlength="{number}"/ng-minlength="{number}"

ng-maxlength="15"/>

Email:验证输入的文本是否是电子邮箱可以使用 type=email来实现

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

Whether numbers:验证输入的文本是否是为数字可以使用 type=number来实现

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

Url:验证输入的文本是否是为url可以使用 type=url来实现

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

4.angular built-in verification instructions

Matching mode:使用ng-pattern="/PATTERN/"来确保输入能匹配指定的正则表达式

<input type= "Text" ng-pattern= "[a-za-z]"/>

5. Properties of the form

The properties of the form can be accessed in the $scope object of the scope, and we can access the $scope object because JavaScript can indirectly access the form properties in the DOM with these properties, we can respond to the form in real-time (two-way binding) These properties

1: Unmodified form This is a Boolean property that is used to determine if the user has modified the form and, if not modified, the value is true otherwise falseformname.inputfieldname. $pristine2: Modified form as long as the user modifies the form regardless of whether the input is validated by returning Trueformname.inputfieldname. $dirty3: A valid form This Boolean property is used to determine whether the contents of the form are illegal. If the current form content is legal. The property is returned as Trueformname.inputfieldname. $valid4: Illegal Forms This boolean property is used to determine whether the contents of the form are illegal, and if the current form contents are illegal, The property is returned as Trueformname.inputfieldname. $invalid5: Error This is another very useful property submitted by angular: $error object, which contains all the validation content of the current form. and whether they are legitimate information, you can access the Formname.inputfieldname. $error, if the validation fails this property value is true, the value of False indicates that the validation was passed. 

Form validation in Angularjs