The so-called manual verification is validated by Angularjs the properties of the form, and becoming a angularjs form must meet two criteria:
1. Add novalidate= "novalidate" to form elements;
2. Add Name= "theform" to form elements,
As follows:
<! DOCTYPE html>
<html lang = "en" ng-app = "myApp1">
<head>
<meta charset = "UTF-8">
<title> </ title>
<link rel = "stylesheet" href = "../ node_modules / bootstrap / dist / css / bootstrap.min.css" />
<link rel = "stylesheet" href = "../ css / main.css" />
</ head>
<body>
<nav class = "navbar navbar-inverse navbar-fixed-top">
<div class = "container">
<div class = "navbar-header">
<a href="/" class="navbar-brand"> Form Submitting </a>
</ div>
</ div>
</ nav>
<div class = "container main-content" ng-controller = "myCtrl1">
<!-novalidate tells the form not to use html verification->
<!-theForm becomes a field of the scope->
<form ng-submit = "onSubmit (theForm. $ valid)" novalidate = "novalidate" name = "theForm">
<div class = "form-group">
<label for = "name"> Name </ label>
<input type = "text" class = "form-control" id = "name" ng-model = "formModel.name" />
</ div>
<div class = "form-group" ng-class = "{
'has-error':! theForm.email. $ valid && (! theForm. $ pristine || theForm. $ submitted),
'has-success': theForm.email. $ valid && (! theForm. $ pristine || theForm. $ submitted)
} ">
<label for = "email"> Email </ label>
<input type = "email" class = "form-control" id = "email" ng-model = "formModel.email" required = "required" name = "email" />
<p class = "help-block" ng-show = "theForm.email. $ error.required && (! theForm. $ pristine || theForm. $ submitted)"> Required </ p>
<p class = "help-block" ng-show = "theForm.email. $ error.email && (! theForm. $ pristine || theForm. $ submitted)"> email format is incorrect </ p>
</ div>
<div class = "form-group">
<label for = "username"> Username </ label>
<input type = "text" class = "form-control" id = "username" ng-model = "formModel.username" />
</ div>
<div class = "form-group">
<label for = "age"> Age </ label>
<input type = "number" class = "form-control" id = "age" ng-model = "formModel.age" />
</ div>
<div class = "form-group">
<label for = "sex"> Sex </ label>
<select name = "sex" id = "sex" class = "form-control" ng-model = "formModel.sex">
<option value = ""> Please choose </ option>
<option value = "male"> Mail </ option>
<option value = "femail"> Femail </ option>
</ select>
</ div>
<div class = "form-group">
<label for = "password"> Password </ label>
<input type = "text" class = "form-control" id = "password" ng-model = "formModel.password" />
</ div>
<div class = "form-group">
<button class = "btn btn-primary" type = "submit"> Register </ button>
</ div>
<pre>
{{theForm | json}}
</ pre>
</ form>
</ div>
<script src = "../ node_modules / angular / angular.min.js"> </ script>
<script src = "second.js"> </ script>
</ body>
</ html>
{
"$error": {
"required": [
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "email",
"$options": null
}
]
},
"$name": "theForm",
"$dirty": false,
"$pristine": true,
"$valid": false,
"$invalid": true,
"$submitted": false,
"email": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "email",
"$options": null
},
"sex": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "sex",
"$options": null
}
}
Above, any input with the name attribute is displayed above.
The module,controller is defined in the Second.js file and the method for submitting the form.
var myApp1 = angular.module (' MyApp1 ', []);
Myapp1.controller (' MyCtrl1 ', function ($scope, $http) {
$scope. Formmodel = {};
$scope. OnSubmit = function () {
$http. Post (' Someurl ', $scope. Formmodel)
. Success (function (data) {
Console.log (':) ');
})
. Error (function (data) {
console.log (':(');
});
Console.log ($scope. Formmodel);;}
);
The above form verification method advantage is controllable, but relatively cumbersome.
The above is the entire contents of this article, I hope that the Angularjs manual form verification can be skilled operation.
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
