<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=no "/>
<title></title>
<body>
<div class= "Body" >
<ul>
<li>
<span class= "Font" >
Mobile phone number
</span>
<input type= "number" name= "Phone" id= "phone" value= "" placeholder= "mobile"/>
</li>
<li>
<span class= "Font" >
Verification Code
</span>
<!--<input type= "number" name= "" id= "Code" value= "" maxlength= "6" placeholder= "Login Verification Code"/>-->
<input type= "button" class= "btn" value= "Get Login Verification Code" >
</li>
</ul>
</div>
</body>
<script src= "Js/jquery-2.1.4.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script>
$ (function () {
$ (' #phone '). Bind (' Focus ', function () {
$ (this). CSS (' color ', ' black ');
})
Limit the length of your mobile phone number
$ (' #phone '). Bind (' input ', function () {
var phonelength = $ (this). Val (). length;
if (Phonelength >11) {
var phone = $ (this). Val (). substr (0,11);
$ (this). Val (phone);
}
})
Regular judgment of mobile phone number
var Phoneflag;
$ (' #phone '). Bind (' blur ', function () {
var phone = $ (this). Val ();
if (!/^ (13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]) [0-9]{8}| ( 170[059]) [0-9]{6}$/i.test (phone))
{
$ (' #phone '). CSS (' Color ', ' red ');
phoneflag=0;
}else if (/^ (13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]) [0-9]{8}| ( 170[059]) [0-9]{6}$/i.test (phone)) {
phoneflag=1;
}
});
Get the countdown status of the login verification code
$ ('. Btn '). Bind (' click ', function () {
var codeflag = 60;
if (Phoneflag = = 1&&codeflag==60) {
var timeflag = setinterval (function () {
if (codeflag>0) {
$ ('. Btn '). Val (codeflag+ ' second after re-sending ');
$ ('. btn '). css ({' Color ': ' Gray '});
$ ('. Btn '). attr (' disabled ', ' disabled ');
codeflag--;
}else {
codeflag=60;
$ ('. Btn '). Val (' Resend Verification Code ');
$ ('. btn '). css ({' Color ': ' #0000FF '});
$ ('. Btn '). Removeattr (' disabled ');
Clearinterval (Timeflag);
}
},1000);
}
})
})
</script>
Verify the phone number and set the countdown for 60 seconds