Build a NG form
1. Make sure that the label on the form has a name attribute, as in the following example. It's better to add a novalidate= "novalidate."
Cannot have an action attribute in 2.form. Submitted to Ng-submit for processing
3. Each input must have ng-model, preferably have a name convenient reference. And then it works with require or ng-minlength.
<form name= "form" novalidate= "Novalidate" >
<label name= "Email" >your email</label>
<input type= "Email" name= "email" ng-model= "email" placeholder= "email address"/>
</form>
ng defaults to provide validation
To verify that text is entered, simply add required to the label:
<input type= "text" ng-model= "User.Name" required/>
Verify that you enter at least {number} characters and use the directive ng-minlength= "{Number}":
<input type= "text" ng-model= "User.Name" ng-minlength= "5"/>
Verify that you enter at most {number} characters and use the directive ng-maxlength= "{Number}":
<input type= "text" ng-model= "User.Name" ng-maxlength= ""/>
Make sure that the input matches a regular expression, using the directive ng-pattern= "/pattern/":
<input type= "text" ng-model= "User.Name" ng-pattern= "/a-za-z/"/>
Verify input is an email, set the type attribute of input to email:
<input type= "Email" name= "email" ng-model= "User.email"/>
Verify that the input is a number, and set the Type property of input to be:
<input type= "number" name= "number" ng-model= "User.age"/>
The validation input is a URL that sets the Type property of input to the URL
<input type= "url" name= "homepage" ng-model= "User.weburl"/>
An example of actual combat (need to verify that an email is required and minimum is 10, maximum is 20, and must contain M characters.) No real meaning, just demo example)
<!doctype html>
<meta charset= "UTF-8" >
<title> Forms </title>
<body>
<form name= "form" novalidate= "Novalidate" >
<input type= "Email" ng-model= "User.email" ng-minlength= "5" "Ng-maxlength=" ng-pattern= "/m.*/" required/>
<input type= "Submit" value= "OK"/>
</form>
<script src= "Http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js" ></script>
<script>
var myApp = angular.module (' myApp ', []);
</script>
</body>
Run this example first do nothing, look at the elements
Note that these marked things are a little interesting. Then enter the characters to see their changes. And then I'll explain these things. (You can see the first required is ng-invalid-required.) But all the others are valid)
It feels as if there is a bug in the validation. as follows: (If you know, please help explain this problem)
<!doctype html>
<meta charset= "UTF-8" >
<title> Forms </title>
<body>
<form name= "form" novalidate= "Novalidate" >
<input type= "Email" ng-model= "User.email" ng-minlength= "5" "Ng-maxlength=" ng-pattern= "/m.*/" required/>
<input type= "Email" ng-model= "USER.EMAIL2" required/>
<input type= "Submit" value= "OK"/>
</form>
<script src= "Http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js" ></script>
<script>
var myApp = angular.module (' myApp ', []);
</script>
</body>
The first example of the email incredibly ng-valid-email. Feel a little bit of a problem. Is it the use of type= "email" and the like can not use ng-minlength ng-pattern or something? I think it might be a problem with the NG version, but after the low version, I found the same problem. I hope someone can explain the problem. GitHub have this problem https://github.com/angular/angular.js/issues/7849 and email verification when GitHub someone raised other questions, https://github.com/ angular/angular.js/issues/5899, it seems that for type= "email" and URLs such as the time to use more attention, my advice is to try not to. Write custom validation, if required. I will introduce the following, there is really enough pain in the egg. Because of this kind of problem, I write the form will not appear type= "email" type= "url" type= "number" and so on, if NG solves this problem. I'm going to update it again.
Status of the form
<!doctype html>
<meta charset= " UTF-8
<title> form </title>
<body>
<form Name = "form"
<input type= "text" name= "name" ng-model= "User.Name" required "5" Ng-maxlength= "/>"
<input type= "text" name= "email" ng-model= "User.email" Required
& nbsp; ng-pattern= "/^" ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+@ ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+\. [A-za-z] {2,3}$/"/>
</form>
{{A}}
<script src=" http://cdn.staticfile.org/angular.js/1.3.0 -beta.8/angular.min.js "></script>
<script>
var myApp = Angular.module (' MyApp ', []);
</script>
</body>
We focus only on the form (class has the following attributes Ng-pristine Ng-invalid ng-invalid-required), if the change in the first input box input s, now class is changed Ng-invalid ng-invalid-required Ng-dirty Ng-invalid-minlength
Now we need to explain something.
Angularjs saves the results of the DOM validation in the $scope object. This allows us to make some processing in real time. The attributes provided to us are:
$pristine Indicates whether the user has modified the form. If it is ture, it means that it has not been modified:
FormName. $pristine;
$dirty when and whether the user has modified the form:
FormName. $dirty
Let's get a visual look at
<!doctype html>
<meta charset= "UTF-8" >
<title> Forms </title>
<body>
<div ng-controller= "TestController" >
<form name= "Form" >
<input type= "text" name= "name" ng-model= "User.Name" Required ng-minlength= "5" ng-maxlength= "/>"
<input type= "text" name= "email" ng-model= "user.email" required
Ng-pattern= "/^ ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+@ ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+\. [A-za-z] {2,3}$/"/>
</form>
<button ng-click= "Getformstatus ()" > View form Status </button>
</div>
<script src= "Http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js" ></script>
<script>
var myApp = angular.module (' myApp ', []);
Myapp.controller (' TestController ', function ($scope) {
$scope. Getformstatus = function () {
Console.log ($scope. form);
}
})
</script>
</body>
If the form changes, you can see some of the properties of the form changing in real time. Look at the top four, you're not hard to find. $dirty and $valid are the opposite, one true, one false or one false, the same $valid, which is the same as whether it is now validated and $invalid is the opposite.
The part of the form says almost, and then says that everything in the form
You can see that each form item also has some common attributes with the form, notice the $error object, and record which error is correct.
A simple example of actual combat
<!doctype html>
<meta charset= "UTF-8" >
<title> Forms </title>
<style>
/* The error message is displayed on the modified form item * *
Input.ng-dirty.ng-invalid {
border:1px solid red;
}
</style>
<body>
<div ng-controller= "TestController" >
<form name= "Form" ng-submit= "Save ()" novalidate= "Novalidate" >
<input type= "text" name= "name" ng-model= "User.Name" Required ng-minlength= "5" ng-maxlength= "/>"
<span class= "error" ng-show= "form. $dirty && form.name. $invalid" > filled out incorrectly </span>
<br/>
<input type= "text" name= "email" ng-model= "user.email" required
Ng-pattern= "/^ ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+@ ([a-za-z0-9]+[_|\_|\.]?) *[a-za-z0-9]+\. [A-za-z] {2,3}$/"/>
<span class= "error" ng-show= "form. $dirty && form.name. $invalid" > Fill out Format error </span>
<br/>
<input type= "Submit" value= "submitted"/>
</form>
</div>
<script src= "Http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js" ></script>
<script>
var myApp = angular.module (' myApp ', []);
Myapp.controller (' TestController ', function ($scope) {
$scope. Save = function () {
Gets whether the form is validated by
if ($scope. form. $valid) {
Alert (' Can submit form through validation ');
}else{
Alert (' form does not pass validation ');
}
}
})
</script>
</body>
Display effects such as figure, of course, some people have questions, such as the first form item, I do not want to prompt to fill out the incorrect so vague, but to tell him is not because he did not fill, or because he is not enough characters, or because you exceed the maximum character. This is also very good to do, also remember the $error? You can get it through Form.name $error. MinLength and the like. See, No. Still don't get it, okay, then give the tease a code example.
Maybe you have some ideas. But still many times powerless, such as brother want to customize the validation or through the background to verify unique? Another example of his side of the input side of the hint effect is too damn bad. I want to be prompted at the time of submission or I want to be prompted when the mouse is not in this focus. OK, maybe you still have a lot of ideas, but the last article is over, let me organize ideas, bring form verification medium.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
