Türkiye'nin en kullanışlı kodcu forumu, en baba kodcular burda !

Yeni özellik: Gönderinize jsfiddle kodu ekleyebilirsiniz.
Bilgi: Bu forum Türkiye'nin en kullanışlı kodcu forumudur. Forum içerisindeki davranış ve paylaşımlarınız moderatörler tarafından izlenmektedir.

Moderatörler: syntaxe, mctr

 
Kullanıcı avatarı
windofelm
Mesaj Panosu Yöneticisi
Mesaj Panosu Yöneticisi
Mesajlar: 73
Kayıt: 15 Eki 2015, 20:06:57
x 66
İletişim:

Angular JS Auto Validate(Form Doğrulama) Kullanımı

28 Şub 2016, 22:28:21

Untitled-1.fw.png
Validasyon örneği
Untitled-1.fw.png (84.3 KiB) 532 kere görüntülendi


Angular js projelerinizde form işlemleri için angular auto-validate modülünü kullanabilirsiniz. İndirme işleminde bower kullanıyorum, isterseniz github reposundan manuel olarak da indirebilirsiniz. Auto validate paketinin kurulumu için;


bower install angular-auto-validate --save



Modülü indirdikten sonra projemize dahil edelim;


<script src="bower_components/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>



Daha sonra uygulamamızın modül tanımı kısmında, bu modülü kullanacağımızı belirtiyoruz(inject ediyoruz)


angular.module('my-app', ['jcs-autoValidate']);



Angular projesi için bu tanımı da yaptıktan sonra aşağıdaki gibi kullanabilirsiniz;


<form name="signupFrm" novalidate="novalidate">
    <div class="form-row">
        <label>Username:</label>
        <input name="username"
            ng-model="model.username"
            ng-minlength="3"
            ng-maxlength="10"
            required/>
    </div>
<form>



Bootstrap kullanıyorsanız <div class="form-row"> kısmını <div class="form-group"> olarak kullanabilirsiniz. İçerideki inputlara da form-control classı verirseniz hata mesajları inputların altında otomatik belirecektir.

Inputlar için HTML5 input türlerini kullanmanız yeterli olacaktır;


<input type="text" class="form-control" ng-model="register.FullName" required>

<input type="number" class="form-control" ng-model="register.Phone">

<input type="email" class="form-control" ng-model="register.Email">



Bunların dışında regex de kullanabilirsiniz, regex kullanımı için dokümantasyonunu inceleyebilir veya yorum bırakabilirsiniz. Aynı zamanda hata mesajlarını da özelleştirmeniz mümkündür. Formun doğrulandığını kontrol etmek için Angular JS Form Doğrulandu mı ? yazısını inceleyebilirsiniz.

Modülün dokümantastonu için; http://jonsamwell.github.io/angular-auto-validate/ adresini ziyaret edebilirsiniz.
1 x
“Zor diyorsun. Zor olacak ki imtihan olsun.” Mevlana

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir