Rumah > Artikel > hujung hadapan web > AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS

AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS

WBOYasal: 2016-05-16 15:26:361187semak imbas

Terdapat kira-kira dua jenis pengesahan borang dalam AngularJS, satu pengesahan manual dan satu lagi pengesahan automatik.
1. Pengesahan manual
Pengesahan manual yang dipanggil adalah untuk mengesahkan melalui atribut borang AngularJS. Untuk menjadi borang AngularJS, dua syarat mesti dipenuhi:

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

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

seperti berikut:

● Menambah novalidate="novalidate" pada borang bermakna borang itu tidak lagi menggunakan ciri pengesahan HTML5

<!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 >
 <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 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-submit

● formModel ialah atribut dalam $scope
● Mengesahkan e-mel borang secara manual, menggunakan banyak sifat borang AngularJS, seperti theForm.email.$valid, theForm.$pristine, theForm.$submitted, theForm.email.$error.required, theForm.email.$ ralat.e-mel
● Cetak semua atribut borang AngularJS melaluie03b848252eb9375d56be284e690e873{{theForm | json}}bc5574f69a0cba105bc93bd3dc13c4ec

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

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

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

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

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

2. Pengesahan automatik
Kaedah pengesahan bentuk lain AngularJS ialah pengesahan automatik, yang dilaksanakan melalui arahan Selain arahan yang disertakan dengan AngularJS, anda juga perlu menggunakan modul pihak ketiga angular-auto-validate.
Mengenai angular-auto-validate:
● Pemasangan: npm i angular-auto-validate ● Petikan: b4e9f4e8d58ad62774aad8e6d2549ab22cacc6d41bbb37262a98f745aa00fbf0 ● pergantungan modul: var myApp = angular.module("app", ["jcs-autoValidate"]);
Untuk menyetempatkan mesej ralat, modul pihak ketiga

angular-localize
juga diperlukan: ● Pemasangan: npm install angular-localize --save ● pergantungan modul: var myApp = angular.module("app", ["localize"]); ● Petikan:

Selain itu, apabila anda mengklik butang hantar borang, anda perlu melumpuhkan butang dan memaparkan kesan menunggu Anda perlu menggunakan modul pihak ketiga angular-ladda:

<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../node_modules/angular-localize/angular-localize.min.js"></script>

● Pemasangan: bower install angular-ladda --save

● pergantungan modul: var myApp = angular.module("app", ["angular-ladda"]);

● Petikan:

Halaman tersebut adalah seperti berikut:

<link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>

<script src="../bower_components/ladda/dist/spin.min.js"></script>
<script src="../bower_components/ladda/dist/ladda.min.js"></script>
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script>

Untuk perkara di atas, lihat butang hantar dahulu:

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
 <meta charset="gb2312">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>
 <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav >
 <div class="container">
  <div class="navbar-header">
   <a href="/" class="navbar-brand">Form Validating Auto</a>
  </div>
 </div>
</nav>
 
<div class="container main-content" ng-controller="myCtrl1">
 <!--novalidate让表单不要使用html验证-->
 <!--theForm变成scope的一个字段-->
 <form ng-submit="onSubmit()" novalidate="novalidate">
  <div class="form-group">
   <label for="name" class="control-label">Name</label>
   <input type="text" class="form-control" id="name" ng-model="formModel.name" required="required"/>
  </div>
 
  <div class="form-group">
   <label for="email" class="control-label">Email</label>
   <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/>
 
  </div>
 
  <div class="form-group">
   <label for="username" class="control-label">Username</label>
   <input type="text"
       class="form-control"
       id="username"
       ng-model="formModel.username"
       required="required"
       ng-pattern="/^[A-Za-z0-9_]{1,32}$/"
       ng-minlength="7"
       ng-pattern-err-type="badUsername"
    />
  </div>
 
  <div class="form-group">
   <label for="age" class="control-label">Age</label>
   <input type="number"
       class="form-control"
       id="age"
       ng-model="formModel.age"
       required="required"
       min="18"
       max="65"
       ng-min-err-type="tooYoung"
       ng-max-err-type="tooOld"
    />
  </div>
 
  <div class="form-group">
   <label for="sex" class="control-label">Sex</label>
   <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required="required">
    <option value="">Please choose</option>
    <option value="male">Mail</option>
    <option value="femail">Femail</option>
   </select>
  </div>
 
  <div class="form-group">
   <label for="password" class="control-label">Password</label>
   <input type="text" class="form-control" id="password" ng-model="formModel.password" required="required" ng-minlength="6"/>
  </div>
 
  <div class="form-group">
   <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
   <button class="btn btn-primary"
       ladda = "submitting"
       data-style="expand-right"
       type="submit">
    <span ng-show="submitting">正在注册...</span>
    <span ng-show="!submitting">注册</span>
   </button>
  </div>
 
   <pre class="brush:php;toolbar:false">
    {{formModel | json}}

● Nilai atribut ladda ialah nilai bool benar bermakna kesan menunggu dinamik dipaparkan, false tidak memaparkan kesan menunggu dinamik Penyerahan di sini ialah atribut dalam skop

<div >
 <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
 <button class="btn btn-primary"
     ladda = "submitting"
     data-style="expand-right"
     type="submit">
  <span ng-show="submitting">正在注册...</span>
  <span ng-show="!submitting">注册</span>
 </button>
</div>

● data-style="expand-right" bermaksud memaparkan kesan menunggu dinamik di sebelah kanan butang

Mari ambil medan Umur dalam bentuk sebagai contoh:

Antaranya, min, max ialah arahan AgularJS, dan ng-min-err-type ialah arahan angular-auto-validate. Konvensyen yang diikuti di sini ialah nama arahan -err-type pengesahan borang ng-AngularJS Apakah fungsi tooYoung dan tooOld, dan di manakah ia digunakan?

<div >
 <label for="age" class="control-label">Age</label>
 <input type="number"
     class="form-control"
     id="age"
     ng-model="formModel.age"
     required="required"
     min="18"
     max="65"
     ng-min-err-type="tooYoung"
     ng-max-err-type="tooOld"
  />
</div>

Ia digunakan pada peringkat modul dan ditakrifkan dalam fail form_validation_auto.js.

Di atas, gunakan perkhidmatan defaultErrorMessageResolver bagi angular-auto-validate dalam kaedah run untuk menyesuaikan mesej ralat. tooYoung dan tooOld pada halaman sepadan dengan errorMessages['tooYoung'] dan errorMessages['badUsername'] di sini.

var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']);
 
myApp1.run(function(defaultErrorMessageResolver){
  defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){
    errorMessages['tooYoung'] = '年龄必须小于{0}';
    errorMessages['tooOld'] = '年龄不能大于{0}';
    errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';
  });
});
 
myApp1.controller('myCtrl1', function($scope, $http){
  $scope.formModel = {};
  $scope.submitting = false;
 
  $scope.onSubmit = function(){
 
    $scope.submitting = true;
    console.log('已提交');
    console.log($scope.formModel);
 
    $http.post('url',$scope.formModel)
      .success(function(data){
        console.log(':)');
        $scope.submitting = false;
      })
      .error(function(data){
        console.log(':(');
        $scope.submitting = false;
      });
  };
});

Keseluruhan kandungan artikel ini diperkenalkan di sini, saya harap ia akan membantu anda mempelajari AngularJS untuk melaksanakan pengesahan borang.

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

AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS

Artikel berkaitan