Kayıt
Form Ekranı
Açıklama:
- First Name: Min 3 - Max 20 - Zorunlu alan
- Last Name: Min 3 - Max 20 - Zorunlu alan
- Email: Zorunlu alan
- Phone: Zorunlu alan - 10 karakter
- Gender: Zorunlu alan
- Password: Regex en az 1 küçük, en az 1 büyük harf ve en az 1 sayı içermeli ve en az bir karakter içermeli. Minimum 6 - maximum 15
- Password Confirmation: Kontrolü ng-change directive’ini kullanarak fonksiyon ile sağla
- Validasyonlar sağlanmadığı takdirde hata mesajı verilecek
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<h2>Kullanıcı Kayıt Ekranı Ekranı</h2>
<form ng-app="kayitApp" ng-controller="kayitCtrl"name="myForm" novalidate>
<p>İsim:<br>
<input type="text" name="isim" ng-model="isim" required ng-minlength="3" ng-minlength="20">
<span style="color:red" ng-show="myForm.isim.$dirty && myForm.isim.$invalid">
<span ng-show="myForm.isim.$error.required">İsim zorunlu</span>
<span ng-show="myForm.isim.$error.ng-minlength">İsim min 3 karakter olmalı</span>
<span ng-show="myForm.isim.$error.ng-maxlength">İsim max 20 karakter olmalı</span>
</span>
</p>
<p>Soy İsim:<br>
<input type="text" name="soyisim" ng-model="soyisim" required ng-minlength="3" ng-minlength="20">
<span style="color:red" ng-show="myForm.soyisim.$dirty && myForm.soyisim.$invalid">
<span ng-show="myForm.soyisim.$error.required">soyisim zorunlu</span>
<span ng-show="myForm.soyisim.$error.ng-minlength">soyisim min 3 karakter olmalı</span>
<span ng-show="myForm.soyisim.$error.ng-maxlength">soyisim max 20 karakter olmalı</span>
</span>
</p>
<p>Email:<br>
<input type="text" name="email" ng-model="email" required
ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/">
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email Alanı Zorunlu</span>
<span ng-show="myForm.email.$error.pattern">Gecersiz Email Adresi</span>
</span>
</p>
<p>Telefon:<br>
<input type="text" name="telefon" ng-model="telefon"
required ng-pattern="/^[0-9]*$/"
ng-minlength="10" ng-maxlength="10" >
<span style="color:red" ng-show="myForm.telefon.$dirty && myForm.telefon.$invalid">
<span ng-show="myForm.telefon.$error.required">telefon Alanı Zorunlu</span>
<span ng-show="myForm.telefon.$error.pattern">Telefon alanı sadece sayı içermeli</span>
<span ng-show="myForm.telefon.$error.minlength ||myForm.telefon.$error.maxlength ">
Telefon 10 karakter olmalı</span>
</span>
</p>
<p>Telefon:<br>
<label class="control-label
col-sm-2">Gender:</label>
<div class="col-sm-10">
<input type="radio" name="gender" ng-model="gender" value="male" required> Male
<input type="radio" name="gender" ng-model="gender" value="female" required> Female
</div>
<p>Şifre:<br>
<input type="text" ng-model="sifre" name="sifre" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])(?=.{6,})/"
required ng-minlength="6" ng-maxlength="15">
<span style="color:red" ng-show="myForm.sifre.$dirty && myForm.sifre.$invalid">
<span ng-show="myForm.sifre.$error.required">sifre Alanı Zorunlu</span>
<span ng-show="myForm.sifre.$error.pattern">en az 1 küçük, en az 1 büyük harf ve
en az 1 sayı içermeli ve en az bir
karakter içermeli</span>
<span ng-show="myForm.sifre.$error.minlength ||myForm.sifre.$error.maxlength ">
sifre en az 6 en fazla 15 karakter olmalı</span>
</span>
</p>
<p>şifre(tekrar):<br>
<input type="text" ng-model="sifretekrar" name="sifretekrar" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])(?=.{6,})/"
required ng-minlength="6" ng-maxlength="15" ng-change="kontrol()">
<span style="color:red" ng-show="myForm.sifretekrar.$dirty && myForm.sifretekrar.$invalid">
<span ng-show="myForm.sifretekrar.$error.required">sifre Alanı Zorunlu</span>
<span ng-show="myForm.sifretekrar.$error.match">Şifre Uyumlu değil</span>
</span>
</p>
<p>
<input type="submit" ng-click="submitform()" ng-disabled="myForm.$invalid"> </p>
</form>
</body>
<script>
var app= angular.module("kayitApp",[]);
app.controller('kayitCtrl', ['$scope', function($scope){
app.kontrol=function(){
myForm.sifretekrar.$error.match= myForm.sifretekrar== myForm.sifre
}
$scope.submitform = function(){
alert("form yerine ulastı");
}
}]);
</script>
</html>
Hiç yorum yok:
Yorum Gönder