AngularJs Form Verification Function Instance Code
- 2021-07-18 06:55:10
- OfStack
No more nonsense, the specific code is as follows:
<!DOCTYPE html>
<html ng-app="angularFormCheckModule">
<head>
<meta charset="UTF-8">
<title>angular Form verification </title>
<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
<style>
span{
color: red;
}
</style>
</head>
<body ng-controller="angularFormCheckCtrl">
<!-- Use angular Check, every 1 All items verified must be used with ng-model Otherwise, the dirty check cannot be performed and the verification cannot be performed -->
<form name="angularForm" novalidate method="post">
<table class="table table-bordered">
<tr>
<td> User name </td>
<td>
<input type="number" required="required" ng-model="user.userName" name="userName" ng-minlength="6"/>
<!--angularForm.userName.$dirty Check whether it is the first 1 Enter once! There are many ways to check whether it is the first 1 Secondary input -->
<span class="warning" ng-show="angularForm.userName.$dirty && angularForm.userName.$error.required">*</span>
<span class="warning" ng-show="angularForm.userName.$error.number"> You can only enter numbers </span>
<span class="warning" ng-show="angularForm.userName.$error.minlength"> At least 6 Number of digits </span>
</td>
</tr>
<tr>
<td> Password </td>
<td>
<!-- Here's id,1 Must be equal to compare-pwd Because the instruction is based on the value of Id Valued -->
<input type="password" required="required" ng-minlength="6" name="pwd" ng-model="user.password" id="pwd"/>
<!--angularForm.pwd.$pristine Enter it for the first time, run it by yourself if it is not clear, and remove the conditions 1 A 1 Try it! -->
<span class="warning" ng-show="!angularForm.pwd.$pristine && angularForm.pwd.$error.required">*</span>
<span class="warning" ng-show="angularForm.pwd.$error.minlength"> At least 6 Number of digits </span>
</td>
</tr>
<tr>
<td> Confirm password </td>
<td>
<!-- Here compare-pwd Is equal to the value of the object being compared name Property value, that is, the 1 Of a password box name Value -->
<input type="password" required="required" name="pwd2" compare-pwd="pwd" ng-model="pwd2"/>
<span class="warning" ng-show="angularForm.pwd2.$error.required">*</span>
<!-- Pay attention to the pwdmatch, It is set in the instruction -->
<span class="warning" ng-show="angularForm.pwd2.$error.pwdmatch">X</span>
<span class="warning" ng-show="angularForm.pwd2.$valid" style="color: green;">OK</span>
<!--
In fact, the simplest way to check this kind of thing is not to write instructions! ! !
<span ng-show="user.password !=pwd2"> Enter the password twice. No 1 To </span>
-->
</td>
</tr>
<tr>
<td> Mobile phone </td>
<td>
<!--pattern Regular expression validates input -->
<input type="number" required="required" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/">
<span class="warning" ng-show="angularForm.phone.$error.required">*</span>
<span class="warning" ng-show="angularForm.phone.$error.number"> You can only enter numbers </span>
<span class="warning" ng-show="angularForm.phone.$error.pattern"> The mobile phone format is incorrect </span>
</td>
</tr>
<tr>
<td> Mailbox </td>
<td>
<input type="email" required="required" ng-model="user.email" name="email"/>
<span class="warning" ng-show="angularForm.email.$error.required">*</span>
<span class="warning" ng-show="angularForm.email.$error.email"> The mailbox format is incorrect </span>
</td>
</tr>
<tr>
<td>URL</td>
<td>
<input type="url" required="required" ng-model="user.url" name="url"/>
<span class="warning" ng-show="angularForm.url.$error.required">*</span>
<span class="warning" ng-show="angularForm.url.$error.url">URL Incorrect format </span>
</td>
</tr>
<tr>
<td>( Note :* Is required )</td>
<td>
<input type="submit" value=" Submit " ng-disabled="!angularForm.$valid" class="btn btn-success"/>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/angular-1.2.22.js" ></script>
<script type="text/javascript" src="../js/angularFormCheck.js" ></script>
</html>js code (in addition to instructions unexpected, nothing available, written out just to say 1 under the mvc mode only!)
var app = angular.module("angularFormCheckModule",[]);
/* Use here MVC Pattern of (used as an example MVC Just) */
app.controller("angularFormCheckCtrl",function($scope,angularFormCheckFactory){//function Write the parameters you need to use in the function
$scope.testVar = angularFormCheckFactory.getTest();// You can get it here $scope.testVar The value of is ---" Exercise angular Form verification ";
$scope.user = {};
$scope.test= "sss";
});
/* You can see it yourself factory , service , providers The difference ( http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider ) */
/* Use Factory Is to create 1 Object, add attributes to it, and then return this object. */
app.factory('angularFormCheckFactory',function(){
// Write your own business logic here
var test = " Exercise angular Form verification ";
var service = {};// Customize 1 Objects
service.getTest = function(){// Add a method to an object
return test;
}
return service;// Returns a custom service Object! ! !
});
/* Custom instruction -- Compare two passwords for equality .angular The command is in the form of hump (here is comparePwd The page is compare-pwd ) */
app.directive('comparePwd',function(){
/*angular Custom instructions can be found on the Internet */
return{
require : 'ngModel',
/*scope Represents the scope, elem Represents the element object that uses this directive (in this case, the 2 Password boxes), attrs . . . ctrl . . . */
link : function(scope,elem,attrs,ctrl){
/* Write your own business logic */
// Note that if the value is taken in this way, the first 1 Password box Id Value must be set and must match the 2 Of a password box compare-pwd Property has the same value
var firstPwdIdObj = "#" + attrs.comparePwd;
$(elem).add(firstPwdIdObj).on('keyup',function(){
/* Perform dirty inspection manually */
scope.$apply(function(){
//$(firstPwdIdObj).val() Indicates the number of 1 The value of the password box. elem.val() Indicates the number of 2 The value of a password box
var flag = elem.val() === $(firstPwdIdObj).val();
//alert(flag+",--"+elem.val()+",--"+$(firstPwdIdObj).val());
ctrl.$setValidity("pwdmatch",flag);//flag, Indicates equality. pwdmatch Used for $error The identifier when, pay attention to the page, $setValidity Yes require Medium ngModel The method!
});
});
}
}
});Let's look at 1 piece of code about the form validation when AngularJs gets focus and loses focus
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.js"></script>
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope)
{
$scope.userType = 'guest';
$scope.change = false;
}]);
</script>
</head>
<body>
<form name="myForm" ng-controller="FormController">
userType: <input name="input" ng-model="userType" ng-blur="change=true" ng-focus="change=false" required>
<span class="error" ng-show="myForm.input.$error.required && change"> Required </span><br>
</form>
</body>
</html>