Rumah > Artikel > hujung hadapan web > AngularJs melaksanakan pengesahan borang ng1.3_AngularJS

AngularJs melaksanakan pengesahan borang ng1.3_AngularJS

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

Penjelasan terperinci artikel sebelumnyaPelaksanaan pengesahan borang AngularJSSeperti yang saya katakan, pengesahan borang akan dioptimumkan selepas ng1.3 Ia tidak lagi memerlukan keadaan ekspresi terperinci untuk mencipta elemen untuk dipaparkan atau disembunyikan .

Contohnya: Versi kami sebelum ng1.3 perlu ditulis seperti berikut:

Salin kod Kod adalah seperti berikut:

76a3b6c9b5d51ccea669abd601517a8d

Arahan ngMessages baharu telah ditambah selepas ng1.3 Ia dibungkus ke dalam modul dan dikeluarkan, jadi apabila kami menggunakannya, kami hanya perlu memperkenalkan modul bergantung ini .

Salin kod Kod adalah seperti berikut:

angular.module('myApp', ['ngMessages' ]);

Bagaimana untuk menggunakan?

Sekarang mari belajar cara menggunakannya. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error：{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

Kesannya adalah seperti berikut:

Dapat dilihat bahawa ng sebenarnya memantau perubahan model melalui $error, kerana $error mengandungi maklumat terperinci tentang ralat Pada masa yang sama, jika terdapat beberapa ralat pada masa yang sama dalam senario aplikasi kami, maka kod di atas Hanya satu mesej ralat akan dipaparkan dalam susunan ng-message. Jika kita perlu memaparkan kesemuanya, kita hanya perlu menambah ng-messages-multiple

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div>

Kesannya adalah seperti berikut:

Bagaimana untuk menggunakan semula?

Kebanyakan maklumat pengesahan kami sangat serba boleh dalam projek (sangat konsisten dalam gaya, perihalan, dll.), jadi kami juga akan mempertimbangkan untuk menggunakan semula di sini dan ng juga menyediakan penyelesaian

Hanya gunakannya sebagai templat, dan laluan permintaan yang ditentukan akan ditambah secara automatik oleh ng. Berikut ialah satu lagi arahan ng-message-include

Kami menyimpan maklumat pengesahan di atas ke halaman statik html yang berasingan, dan kemudian menggunakan ng-message-include untuk menentukan laluan permintaan.

Kod:

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

error.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

Kesannya adalah seperti berikut:

Sudah tentu, templat mungkin tidak memenuhi keperluan anda untuk gesaan ralat medan tertentu dalam tempoh khas Anda boleh menambah gesaan tersuai seperti berikut:

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

Pengesahan tersuai (arahan) melibatkan banyak perincian dan pengetahuan Jika anda menggunakannya semata-mata untuk kegunaan, anda mungkin boleh menulis fungsi itu, tetapi kod itu hodoh dan terlalu kekok beberapa bulan untuk memahaminya. Bahagian cetek sudah tamat buat masa ini. Sebaik sahaja anda memahaminya sepenuhnya, saya akan berkongsi dengan anda Anda juga boleh mempelajarinya dengan "Memahami Perintah 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：Penjelasan terperinci tentang kemahiran Express routing_javascriptArtikel seterusnya：Penjelasan terperinci tentang kemahiran Express routing_javascript

Artikel berkaitan

Lihat lagi