Rumah > Artikel > hujung hadapan web > pengesahan borang manual AngularJS_AngularJS

pengesahan borang manual AngularJS_AngularJS

WBOYasal: 2016-05-16 15:16:481249semak imbas

Pengesahan manual yang dipanggil adalah untuk mengesahkan melalui atribut borang AngularJS dan untuk menjadi borang AngularJS, dua syarat mesti dipenuhi:

1. Tambahkan novalidate="novalidate" pada elemen borang;

2. Tambahkan nama="theForm" pada elemen borang,

adalah seperti berikut:

<!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让表单不要使用html验证-->
 <!--theForm变成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)">必填</p>
  <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</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 class="brush:php;toolbar:false">
  {{theForm | json}}

● Menambah novalidate="novalidate" pada borang bermakna borang itu tidak lagi menggunakan ciri pengesahan HTML5
● Menambah nama="theForm" pada borang bermakna nama borang ialah theForm. Cara menggunakan Borang, sebagai contoh, kami mengesahkan sama ada borang telah diubah suai Borang.$submitted
● Hantar borang melalui ng-serahkan
● formModel ialah atribut dalam $scope
● Mengesahkan e-mel borang secara manual, menggunakan banyak atribut borang AngularJS, seperti theForm.email.$valid, theForm.$pristine, theForm.$submitted, theForm.email.$ error.required, theForm.email.$error.email
● Cetak semua atribut borang AngularJS melalui e03b848252eb9375d56be284e690e873{{theForm | json}}bc5574f69a0cba105bc93bd3dc13c4ec

{
 "$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
 }
}

Di atas, semua input dengan atribut nama dipaparkan di atas.

Modul, pengawal dan kaedah menyerahkan borang ditakrifkan dalam fail second.js.

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);
 };
});

Kelebihan kaedah pengesahan borang di atas ialah ia sangat boleh dikawal, tetapi ia agak menyusahkan.

Di atas adalah keseluruhan kandungan artikel ini. Saya harap saya boleh menjadi mahir dalam pengesahan borang manual AngularJS.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Contoh kod untuk operasi JavaScript pada elemen terpilih dan kemahiran options_javascriptArtikel seterusnya：Contoh kod untuk operasi JavaScript pada elemen terpilih dan kemahiran options_javascript

Artikel berkaitan

Lihat lagi