Details about form verification (recommended) in AngularJS and angularjs

Details about form verification (recommended) in AngularJS and angularjs

AngularJS comes with a lot of verification, what is required, the maximum length, the minimum length..., here to record a few useful regular expression Verification

1. Use angularjs Form Verification

Regular Expression Verification

You only need to configure a regular expression to conveniently complete the verification. Theoretically, all the verifications can be completed using the regular expression.

// Javascript $ scope. assumeregx = "^ 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 =" assumeregx "/> <span class =" error "ng-show =" registerForm. $ submitted & registerForm. mobile. $ error. required "> * the mobile phone number cannot be blank </span> <span class =" error "ng-show =" registerForm. $ submitted & registerForm. mobile. $ error. pattern "> * invalid mobile phone number address </span> </div> <input type =" text "ng-pattern ="/[a-zA-Z]/"/>

Number

Set input type = number.

<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 "> * Estimated time </span> </div>

Email

<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 appealing

2. Use ngMessages to verify the form

Compared with each verification above, you must write your own code to determine whether the ngMessages provides a more concise method.

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 = "20" required/> </label> <pre> myForm. myName. $ error = {myForm. myName. $ error | json }}</pre> <! -- Must be used with ng-if. Otherwise, the verification will be triggered when you touch it. --> <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> </form>

This is the second liberation...

2. dynamically generated form verification

If some of your form content is dynamically generated and the number and name are not sure, how can you verify these generated elements? In fact, maintaining a dynamic form is a problem. But in angular, you only need to remember one thing: Prepare your data and hand over the rest to angular. In the following example, you only need to maintain an array and then use ng-repeat to quickly render it to the page.

In fact, dynamic form and general form verification are consistent, but dynamic form needs to be accessed in the form of myForm [inout_name]. $ error

<! -- The owner of the dynamic display status --> <div class = "form-group col-md-6" ng-repeat = "sta in task. status_table | orderBy: sta. sequence_order "> <label >{{ sta. status_name }}owner </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 "> * select the owner </p> </div>

3. Highlight required items

In some forms, we do not want to add text information below for verification, but want a more concise method, such as adding a border to highlight the display.

All you need to do is add the class when the required verification fails and change the element style.

<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 = "50" type = "text" class = "form-control" placeholder = "mobile phone number or email" 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 =" 50 "placeholder =" password "ng-model =" account. password "ng-class =" {'form-control': 1, warn: loginForm. $ submitted & loginForm. password. $ error. required} "> </div> <button type =" submit "class =" btn-default "> <span class =" glyphicon-lock "> </span> log on </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 section describes the Form Verification in AngularJS. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!