Detailed form verification in Angularjs (recommended) _angularjs

Angularjs with a lot of verification, what must be filled, the maximum length, the minimum length ..., here are several useful regular validation records

1. Form validation using Angularjs

Regular validation

Only need to configure a regular formula, very convenient to complete the verification, in theory, all the validation can be done in a regular style

JavaScript
$scope. mobileregx = "^1 (3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9]) \\d{8}$";
$scope. EMAILREGX = "^[a-z] ([a-z0-9]*[-_]?[ a-z0-9]+) *@ ([a-z0-9]*[-_]?[ a-z0-9]+) +[\.] [A-z] {2,3} ([\.] [A-z] {2})? $";
$scope. pwdregx = "[a-za-z0-9]*";
<div class= "Form-group" >
<input class= "Form-control" name= "mobile" type= "text" ng-model= " Account.mobile "Required ng-pattern=" mobileregx "/> <span class=
" error "ng-show=" Registerform. $submitted && registerform.mobile. $error. Required ">* cell phone number cannot be empty </span>
<span class=" error "ng-show=" Registerform. $submitted && registerform.mobile. $error. Pattern ">* Mobile number Address not valid </span>
</div >
<input type= "text" ng-pattern= "/[a-za-z]/"/>

Digital

Set the input Type=number can

<div class= "Form-group col-md-6" >
<label for= "password" >
estimated time
</label>
<div class= "Input-group" >
<input Required type= "number" class= "Form-control" ng-model= "Task.estimated_time" Name= "Time"/>
<span class= "Input-group-addon" > Minutes </span>
</div>
<span class= " Error "ng-show=" Newtaskform $submitted && newtaskform.time. $error. Required ">* please estimate time </span> 
</div>

Mailbox

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

Url

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

Effect

The effect is real-time, very sense

2. Validate the form with Ngmessages

Ngmessages provides a more concise way of writing code to judge each of the previous validations.

Https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Angular.module (' ngmessagesexample ', [' ngmessages ']);
<form name= "MyForm" >
<label>
Enter your name:
<input type= "text"
name= "MyName
" Ng-model= "name"
ng-minlength= "5"
ng-maxlength= "
required/>
</label>
< Pre>myform.myname. $error = {myform.myname. $error | json}}</pre>
<!--need to work with ng-if, otherwise it will be shown at the beginning, You touch it, it triggers validation 
.--> <div ng-messages= "myform.myname. $error" style= "Color:maroon" role= "alert" ng-if= " Myform.myname. $touched ">
<div ng-message=" required ">you did not enter a field</div>
<div Ng-message= ' minlength ' >your field is too short</div> <div ng-message=
' maxlength ' >your field is too long</div>
</div>
</form>

It's the second time ...

2. Validation of dynamically generated forms

How do you validate the generated elements if you have a part of the form whose contents are dynamically generated, and the number and name are uncertain? In fact, maintaining a dynamic form is inherently a problem. But in angular, just remember one point: Get your data ready and the rest to angular. As in the following example, you only need to maintain an array, and then use Ng-repeat to quickly render to the page.

In fact, the dynamic form and the general form validation are consistent, but the dynamic form needs to use Myform[inout_name]. $error form of Access

<!--the owner of the dynamic display status-->
<div class= "Form-group col-md-6" ng-repeat= "sta in Task.status_table | orderBy:sta.seq Uence_order ' >
<label>{{sta.status_name}} responsible </label>
<select required class= ' Form-control "ng-model=" sta.user_id "ng-options=" qa.id as qa.last_name+ ' +qa.last_name for QA in taskuserlist ' name= ' {{ Sta.status_name}} ">
</select>
<div ng-messages=" newtaskform[sta.status_name]. $error "ng-if=" Newtaskform. $submitted | | Newtaskform[sta.status_name]. $touched ">
<p class=" error "ng-message=" required ">* Please select owner </p>
</div>
</div>

3. Required Fields Highlight

Some forms we don't want to be rude. Add text information to the following prompts for verification, but want a more concise way, such as: Highlight the border, highlighting

All you need to do is add class when required validation doesn't work, change the style of the element.

<form name= "LoginForm" Novalidate ng-submit= "Loginpost ()" class= "Navbar-form navbar-right" ng-hide= "Login" > <fake-autocomplete></fake-autocomplete> <div class= "Form-group" > <input name= "user_name" Required maxlength= "type=" "Text" class= "Form-control" placeholder= "mobile number or mailbox" ng-model= "Account.user_name" ng-class= "{warn:loginform. $submitted && loginform.user_name. $error. Required}" > </div> <div class= " Form-group "> <input name=" password "required type=" password "maxlength=" "placeholder=" password "ng-model=" Account.password "ng-class=" {' Form-control ': 1,warn:loginform. $submitted && loginform.password.$ error.required} "> </div> <button type=" Submit "class=" btn btn-default "><span class=" Glyphicon Glyphicon-lock ></span> Login </button> </form> warn {border-color: #f78d8d!important outline:0!
Important
-webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075), 0 0 8px RGB (239, 154, 154)!important;Box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075), 0 0 8px Rgba (239, 154, 154)!important; }

The above is a small set to introduce the detailed angularjs in the form of verification, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!