AngularJs melaksanakan pengesahan borang ng1.3

AngularJs melaksanakan pengesahan borang ng1.3_AngularJS

WBOY

Lepaskan： 2016-05-16 15:26:28

asal

1321 orang telah melayarinya

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:

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

error.html

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

Salin selepas log masuk

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>

Salin selepas log masuk

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