Rumah > Artikel > hujung hadapan web > Pengesahan borang automatik AngularJS_AngularJS

Pengesahan borang automatik AngularJS_AngularJS

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

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
kebergantungan modul: var myApp = angular.module("app", ["jcs-autoValidate"]);

Untuk menyetempatkan mesej ralat, anda juga memerlukan modul pihak ketiga angular-localize:

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

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

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

Pemasangan: bower install angular-ladda --save
kebergantungan modul: var myApp = angular.module("app", ["angular-ladda"]);
Petikan:

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

Halaman tersebut adalah seperti berikut:

<html>
<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 class="navbar navbar-inverse navbar-fixed-top">
 <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}}

Lihat butang hantar dahulu:

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

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
data-style="expand-right" bermaksud memaparkan kesan menunggu dinamik di sebelah kanan butang

Mari ambil medan Umur dalam bentuk sebagai contoh:

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

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?

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

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

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：Node.js melaksanakan fail JS yang menggabungkan gadget_node.jsArtikel seterusnya：Node.js melaksanakan fail JS yang menggabungkan gadget_node.js

Artikel berkaitan

Lihat lagi