Although I am not a front-end programmer, I understand how important it is to do a good job of verification on the front-end.
Because in this way, the backend can take a more breath, and compared with the backend, the frontend can indeed improve the user's sense of happiness.
AngularJS provides a very convenient form verification function, record it here.
First start with the following code
The code copy is as follows:
<form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>
<p>Email:
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="mainForm.email.$dirty && mainForm.email.$invalid">
<span ng-show="mainForm.email.$error.required">Email is required.</span>
<span ng-show="mainForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="mainForm.$invalid">
</p>
</form>
<script>
angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
$scope.user = 'Kavlez';
$scope.email = '[email protected]';
}]);
</script>
Some verification options for input tags are usually used with HTML5 tags.
Required
<input type="text" required />
length
Use the directive ng-minlength/ng-maxlength
<input type="text" ng-minlength="5" />
Specific format
For example, email, URL, and number, just set the type to the corresponding type, for example:
The code copy is as follows:
<input type="email" name="email" ng-model="user.email" />
<input type="number" name="age" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />
Pattern matching
Use the directive ng-pattern, for example:
The code copy is as follows:
<input type="text" ng-pattern="[az]" />
Form properties, these properties make it easier to operate on forms
pristine/dirty
Indicates whether it has been modified, e.g.
The code copy is as follows:
<form name="mainForm" ng-controller="orderController">
<input type="email" name="userEmail" ng-model="myEmail" />
{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}
</form>
Accessed in formName.fieldName.$pristine mode, input must have an ng-model declaration.
The code copy is as follows:
valid/invalid
Indicates whether it passes verification.
The code copy is as follows:
$error
Form verification information, and the corresponding information is returned if the verification fails.
AngularJS provides css class accordingly for form status
The code copy is as follows:
.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid
For example, let verification pass green and fail red:
The code copy is as follows:
input.ng-valid {
color: green;
}
input.ng-invalid {
color: green;
}
In the example given, just one email verification is written so much. If you add a few fields, add a few different prompts, and add a few events, the code will become messy.
In fact, it is not recommended to do this, we have a better way.
It is to use angular-messages.js
First of all, don't forget these two steps
The code copy is as follows:
<script src="angular-messages.js"></script>
angular.module('myApp', ['ngMessages'])
OK, first replace those duplicates with ng-messages and ng-message, and the above example becomes:
The code copy is as follows:
<form ng-controller="validationController" name="mainForm" >
<p>Email:
<input
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
<div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple>
<p ng-message="required">Email is required.</p>
<p ng-message="email">Invalid email address.</p>
<p ng-message="minlength">min length 10</p>
<p ng-message="maxlength">max length 50</p>
</div>
</p>
<p>
<input type="submit" ng-disabled="mainForm.$invalid" />
</p>
</form>
There is no change in function, just the duplicate code has been removed.
Pay attention to distinguishing between ng-messasges and ng-messages. Does it feel a bit like with()? The ng-messages-multiple behind it is used to make multiple prompts appear at the same time.
But this is still not good enough. Even if the content in ng-message is omitted, there will still be duplication when required verification exists in multiple fields.
Moreover, there will be more and more repeated verification prompts if forms on different pages involve the same content.
To solve this problem, we can use the ng-messages-include directive.
This directive is used to reference templates, for example, the above example becomes:
The code copy is as follows:
<form ng-controller="validationController" name="mainForm" >
<p>Email:
<input
type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
<div style="color:red" ng-messages="mainForm.email.$error" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
</div>
</p>
<p>
<input type="submit" ng-disabled="mainForm.$invalid" />
</p>
</form>
It's not complicated, let's add something.
In order to make the prompts more friendly (?), we try to achieve the effect of prompts appearing after the cursor leaves.
At this time, it will be much more convenient to use directives. Here we first involve some information related to the instructions.
Run it first and then talk about it:
The code copy is as follows:
var myApp = angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
$scope.user = 'Kavlez';
$scope.email = '[email protected]';
}])
.directive('hintOnBlur', [function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.focused = false;
element.bind('focus', function(evt) {
scope.$apply(function() {ctrl.focused = true;});
}).bind('blur', function(evt) {
scope.$apply(function() {ctrl.focused = false;});
});
}
}
}]);
Here we use focused to determine whether the cursor is on a certain property. When the focus or blur event occurs on an object using the hintOnBlur directive, the state of focus changed.
The form will be changed as follows:
The code copy is as follows:
<form ng-controller="validationController" name="mainForm" >
<p>Email:
<input type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required hint-on-blur />
<div style="color:red" ng-messages="mainForm.email.$error" ng-show="!mainForm.email.focused" ng-messages-multiple ng-messages-include="validateTemplate/email.html">
</div>
</p>
<p>
<input type="submit" ng-disabled="mainForm.$invalid" />
</p>
</form>
Add the judgment of focused in ng-show, and a prompt appears when false.
It looks like that now.
Customize verification methods and validity, which also uses directives.
Verify that the email you filled in has occupied. Here is a simple simulation:
The code copy is as follows:
.directive('isAlreadyTaken', function() {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.push(function(val) {
ctrl.$setValidity('emailAvailable', false);
var emailTable = [
for (var i=0;i<emailTable.length;i+=1)
if(val==emailTable[i])
return;
ctrl.$setValidity('emailAvailable', true);
return val;
})
}
}
})
Add the is-already-taken attribute to the Input element and add another ng-message:
The code copy is as follows:
<p ng-message="emailAvailable">Already takes! try other email addresses!</p>