Formularët janë po aq të mirë sa të dhënat që pranojnë dhe këtu hyn vërtetimi. Ka lloje të ndryshme vërtetimi. Në një rast, thjesht mund të dëshironi të siguroheni që futja e emailit të jetë plotësuar. Në një tjetër, ju dëshironi që të plotësohet dhe të siguroheni që është i vlefshëm dhe përmban një simbol @.
Ajo që nuk shihni shpesh është vërtetimi i numrit të telefonit sepse është i vështirë. Jo më. Ky tutorial do t'ju mësojë se si të shtoni vërtetimin në fushat e futjes së numrit tuaj të telefonit duke përdorur jQuery.
Hapi 1 - Shtoni HTML-në më poshtë ku do të jetojë forma juaj
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-3">
<label class="control-label">Country:</label>
<div class="country"></div>
</div>
<div class="col-md-3">
<input type="tel" class="tel form-control" pattern="\d*" x-autocompletetype="tel" placeholder="Mobile Phone Number" autofocus>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Hapi 2 - Shtoni CSS më poshtë në fletën kryesore të stilit të faqes tuaj të internetit
input, div {
font-size: 28px;
font-family: 'Open Sans Condensed', sans-serif;
}
.country {
font-family: 'Open Sans Condensed', sans-serif;
}
.well {
margin-top: 24px;
}
p {
font-size: 22px;
}
Hapi 3 - Shtoni JavaScript më poshtë në një skedar të quajtur mobileValidate.js
$(document).ready(function() {
jQuery(function($){
var input = $('[type=tel]')
input.mobilePhoneNumber({allowPhoneWithoutPrefix: '+1'});
input.bind('country.mobilePhoneNumber', function(e, country) {
$('.country').text(country || '')
})
});
});
Hapi 4 - Shtoni përfshirjet më poshtë në faqen e internetit që përmban formularin tuaj
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.caret/0.1/jquery.caret.js"></script> <script src="https://www.solodev.com/assets/phone/jquery.mobilePhoneNumber.js"></script> <script src="mobileValidate.js"></script>
"Demo në JSFiddle"
"Shkarko nga GitHub"
"Fillimisht e postuar në Blogun e Dizajnit të Uebit Solodev"
Të sjellë nga ekipi Solodev. Solodev është një "sistem i menaxhimit të përmbajtjes" i bazuar në renë kompjuterike që fuqizon përdoruesit me lirinë për të sjellë në jetë "dizajn të mahnitshëm të uebit".
