AngularJS melaksanakan form validation_AngularJS

Walaupun saya bukan pengaturcara bahagian hadapan, saya faham betapa pentingnya melakukan pengesahan pada bahagian hadapan.

Oleh kerana dengan cara ini bahagian belakang boleh berehat, dan berbanding dengan bahagian belakang, bahagian hadapan sebenarnya boleh meningkatkan kegembiraan pengguna.

AngularJS menyediakan fungsi pengesahan bentuk yang sangat mudah, yang direkodkan di sini.

Mula-mula mula dengan kod berikut

Salin kod Kod adalah seperti berikut:

E-mel:
          
          
                               E-mel diperlukan.
                Alamat e-mel tidak sah.
                                                                                              

          

angular.module('myApp',[])
.controller('validationController', ['$scope',function($skop) {
$scope.user = 'Kavlez';
$scope.email =
'sweet_dreams@aliyun.com'; }]);

Beberapa pilihan pengesahan untuk teg input, biasanya digunakan bersama dengan teg HTML5.

Diperlukan

Panjang

Gunakan arahan ng-minlength/ng-maxlength

Format khusus
Contohnya, e-mel, URL, nombor, hanya tetapkan jenis kepada jenis yang sepadan, contohnya:

Salin kod Kod adalah seperti berikut:

Padanan corak

Gunakan corak ng arahan, contohnya:

Salin kod Kod adalah seperti berikut:

Borang sifat yang memudahkan untuk beroperasi pada borang

suci/kotor

Menunjukkan sama ada ia telah diubah suai, seperti

Salin kod Kod adalah seperti berikut:

{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}

Diakses dalam mod formName.fieldName.$pristine, input mesti mempunyai pengisytiharan model ng.

Salin kod Kod adalah seperti berikut:

sah/tidak sah

menunjukkan sama ada pengesahan telah diluluskan.

Salin kod Kod adalah seperti berikut:

$error

Maklumat pengesahan borang, maklumat yang sepadan akan dikembalikan apabila pengesahan gagal.

AngularJS menyediakan kelas css yang sepadan untuk status borang

Salin kod Kod adalah seperti berikut:

.ng-murni
.ng-kotor
.ng-sah
.ng-invalid

Contohnya, jadikan lulus pengesahan hijau dan merah kegagalan:

Salin kod Kod adalah seperti berikut:

input.ng-sah {
Warna: hijau;
}
input.ng-invalid {
Warna: hijau;
}

Dalam contoh yang diberikan, hanya satu pengesahan e-mel ditulis Jika anda menambah beberapa medan, beberapa gesaan berbeza dan beberapa acara, kod akan menjadi tidak kemas.

Ini sebenarnya tidak disyorkan, kami ada cara yang lebih baik.
Hanya gunakan angular-messages.js

Pertama sekali, jangan lupa dua langkah ini

Salin kod Kod adalah seperti berikut:

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

Baiklah, mula-mula gantikan pendua tersebut dengan ng-message dan ng-message Contoh di atas menjadi:

Salin kod Kod adalah seperti berikut:

E-mel:
                                 type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" diperlukan />
            

                 

E-mel diperlukan.

               

Alamat e-mel tidak sah.

                

min length 10

                        

max length 50

                                                                                              

           

Tiada perubahan dalam fungsi, cuma semua kod pendua telah dialih keluar.

Beri perhatian untuk membezakan antara ng-message dan ng-message Adakah ianya agak seperti dengan()?

Tetapi ini masih tidak cukup baik Walaupun kandungan dalam ng-mesej diabaikan, masih terdapat pendua apabila pengesahan yang diperlukan wujud dalam berbilang medan.

Lebih-lebih lagi, jika borang pada halaman berbeza semuanya melibatkan kandungan yang sama, akan terdapat lebih banyak gesaan pengesahan berulang.
Untuk menyelesaikan masalah ini, kita boleh menggunakan arahan ng-message-include.
Arahan ini digunakan untuk merujuk templat Contohnya, contoh di atas menjadi:

Salin kod Kod adalah seperti berikut:

E-mel:
                                  type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" diperlukan />
           

                                                                                              

           

Ia tidak rumit, mari tambah beberapa perkara lagi.
Untuk menjadikan gesaan lebih mesra(?), mari kita cuba mencapai kesan gesaan yang muncul selepas kursor keluar.
Pada masa ini, adalah lebih mudah untuk menggunakan arahan. Mari kita mula-mula membahas beberapa kandungan yang berkaitan dengan arahan.

Mari kita jalankan dahulu:

Salin kod Kod adalah seperti berikut:

var myApp = angular.module('myApp',[])
.controller('validationController', ['$scope',function($skop) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         kembali {
             memerlukan: 'ngModel',
               pautan: fungsi (skop, elemen, attr, ctrl) {
                ctrl.focused = palsu;
                      element.bind('focus', function(evt) {
skop.$apply(function() {ctrl.focused = true;});
                    }).bind('blur', function(evt) {
skop.$apply(function() {ctrl.focused = false;});
                });
            }
}
}]);

Di sini kami menggunakan fokus untuk menentukan sama ada kursor berada pada atribut tertentu Apabila fokus atau peristiwa kabur berlaku pada objek menggunakan arahan hintOnBlur, keadaan fokus berubah.

Borang juga akan diubah mengikut kaedah penggunaan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

E-mel:
           

                                                                                              

           

Tambahkan pertimbangan fokus pada ng-show, dan gesaan akan muncul apabila ia palsu.

Nampaknya begitu sekarang.

Sesuaikan kaedah pengesahan dan kesahihan, yang juga menggunakan arahan.

Sahkan sama ada alamat e-mel yang diisi sudah diisi Berikut ialah simulasi mudah:

Salin kod Kod adalah seperti berikut:

.directive('isAlreadyTaken', function() {
    kembali {
        memerlukan: 'ngModel',
        pautan: fungsi(skop, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                untuk (var i=0;i                     if(val==emailTable[i])
                        kembali;
                ctrl.$setValidity('emailAvailable', true);
                pulangkan val;
            })
        }
    }
})

Input元素中加上sudah-diambil属性，并且再加一个ng-mesej:

复制代码 代码如下:

Sudah diambil! cuba alamat e-mel lain!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7469

15

Tutorial CakePHP

1376

52

Apakah format nama akaun stim

77

11

kunci pengaktifan win11 kekal

48

19

Sambungan NYT menunjukkan dan jawapan

19

29

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menggunakan rangka kerja CodeIgniter4 dalam php? May 31, 2023 pm 02:51 PM

PHP ialah bahasa pengaturcaraan yang sangat popular, dan CodeIgniter4 ialah rangka kerja PHP yang biasa digunakan. Apabila membangunkan aplikasi web, menggunakan rangka kerja sangat membantu Ia boleh mempercepatkan proses pembangunan, meningkatkan kualiti kod dan mengurangkan kos penyelenggaraan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja CodeIgniter4. Pasang rangka kerja CodeIgniter4 Rangka kerja CodeIgniter4 boleh dimuat turun dari laman web rasmi (https://codeigniter.com/). Bawah

Cara menggunakan Flask-WTF untuk melaksanakan pengesahan borang Aug 03, 2023 pm 06:53 PM

Cara menggunakan Flask-WTF untuk melaksanakan pengesahan borang Flask-WTF ialah sambungan Flask untuk mengendalikan pengesahan borang web Ia menyediakan cara yang ringkas dan fleksibel untuk mengesahkan data yang diserahkan oleh pengguna. Artikel ini akan menunjukkan kepada anda cara menggunakan sambungan Flask-WTF untuk melaksanakan pengesahan borang. Pasang Flask-WTF Untuk menggunakan Flask-WTF, anda perlu memasangnya terlebih dahulu. Anda boleh menggunakan arahan pip untuk memasang: pipinstallFlask-WTF import modul yang diperlukan dalam F

Pembangunan Laravel: Bagaimana untuk mengesahkan permintaan borang menggunakan Pengesahan Laravel? Jun 13, 2023 pm 01:34 PM

Laravel ialah rangka kerja pembangunan web PHP yang popular yang menyediakan banyak ciri mudah untuk mempercepatkan kerja pembangun. Antaranya, LaravelValidation ialah fungsi yang sangat praktikal yang boleh membantu kami mengesahkan permintaan borang dan data yang dimasukkan pengguna dengan mudah. Artikel ini akan memperkenalkan cara menggunakan LaravelValidation untuk mengesahkan permintaan borang. Apakah itu LaravelValidationLaravelValidation ialah La

Cara mengendalikan pengesahan borang menggunakan middleware dalam Laravel Nov 02, 2023 pm 03:57 PM

Cara menggunakan perisian tengah untuk mengendalikan pengesahan borang dalam Laravel, contoh kod khusus diperlukan Pengenalan: Pengesahan borang ialah tugas yang sangat biasa dalam Laravel. Untuk memastikan kesahihan dan keselamatan data yang dimasukkan oleh pengguna, kami biasanya mengesahkan data yang diserahkan dalam borang. Laravel menyediakan fungsi pengesahan borang yang mudah dan juga menyokong penggunaan perisian tengah untuk mengendalikan pengesahan borang. Artikel ini akan memperkenalkan secara terperinci cara menggunakan perisian tengah untuk mengendalikan pengesahan borang dalam Laravel dan memberikan contoh kod khusus.

Bagaimana untuk melaksanakan pengesahan borang untuk aplikasi web menggunakan Golang Jun 24, 2023 am 09:08 AM

Pengesahan borang adalah pautan yang sangat penting dalam pembangunan aplikasi web Ia boleh menyemak kesahihan data sebelum menyerahkan data borang untuk mengelakkan kelemahan keselamatan dan ralat data dalam aplikasi. Pengesahan borang untuk aplikasi web boleh dilaksanakan dengan mudah menggunakan Golang Artikel ini akan memperkenalkan cara menggunakan Golang untuk melaksanakan pengesahan borang untuk aplikasi web. 1. Elemen asas pengesahan borang Sebelum memperkenalkan cara melaksanakan pengesahan borang, kita perlu mengetahui apakah elemen asas pengesahan borang. Unsur bentuk: unsur bentuk ialah

Kaedah pengesahan dan penapisan borang dalam PHP? Jun 29, 2023 pm 10:04 PM

PHP ialah bahasa skrip yang digunakan secara meluas dalam pembangunan web, dan pengesahan dan penapisan bentuknya merupakan bahagian yang sangat penting. Apabila pengguna menyerahkan borang, data yang dimasukkan oleh pengguna perlu disahkan dan ditapis untuk memastikan keselamatan dan kesahihan data. Artikel ini akan memperkenalkan kaedah dan teknik tentang cara melaksanakan pengesahan dan penapisan borang dalam PHP. 1. Pengesahan borang Pengesahan borang merujuk kepada menyemak data yang dimasukkan oleh pengguna untuk memastikan data mematuhi peraturan dan keperluan tertentu. Pengesahan borang biasa termasuk pengesahan medan yang diperlukan, format e-mel dan format nombor telefon mudah alih.

Petua pengesahan borang PHP: Cara menggunakan fungsi filter_input untuk mengesahkan input pengguna Aug 01, 2023 am 08:51 AM

Petua pengesahan borang PHP: Cara menggunakan fungsi filter_input untuk mengesahkan input pengguna Pengenalan: Apabila membangunkan aplikasi web, borang ialah alat penting untuk berinteraksi dengan pengguna. Mengesahkan input pengguna dengan betul adalah salah satu langkah utama untuk memastikan integriti dan keselamatan data. PHP menyediakan fungsi filter_input, yang boleh mengesahkan dan menapis input pengguna dengan mudah. Artikel ini akan memperkenalkan cara menggunakan fungsi filter_input untuk mengesahkan input pengguna dan memberikan contoh kod yang berkaitan. satu,

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

See all articles