When the user registers, usually needs the short message authentication code, moreover for the interaction effect, also needs to increase the countdown.
The effect is as follows:
<div class= "User-form" >
<form action= "{{path (' Zm_member_register ')}}" method= "POST" >
<div class= "Form-list" >
<label class= "Register-label" > Mobile phone number </label>
<input class= "Regphone Input-register "type=" text "name=" phone "placeholder=" Please enter your mobile number "/> </div> <div class=" form-list
" >
<label class= "Register-label" > Verification Code </label>
<input class= "Input-short" type= "text" name= "Sms_salt" placeholder= "Please send SMS Authentication code"/> <input class= "Input-code" id= "btn" type= "
button" value= "Sending authentication code"/>
</div>
<input style= "margin-top:60px type=" Submit "class=" Registersubmit form-sumbit "value=" Submit "/>
</form>
</div>
The verification code here is passed to the background of this URL ({{path (' Zm_member_get_salt ')}), the phone number and type (type=1 for registration) of the two values, the background receive the value of success returns the success of the status value.
Based on this, the implementation of the verification code countdown, that can be judged after the success. Call the encapsulated Countdown function time (), noting that the validation code should use input with type button, you can easily change its value to show the countdown.
<script type= "Text/javascript" >
//Countdown 60 sec
var wait=60;
function Time (o) {
if (wait = = 0) {
o.removeattribute ("Disabled");
o.value= "Get dynamic Code";
Wait = n
else {
O.setattribute ("disabled", true);
O.value= "Resend (" + Wait + ")";
wait--;
settimeout (function () {Time
(o)
}, 1000)
}
$ ('. Input-code '). Click (function () {
var phone = $ ('. Regphone '). Val ();
$.ajax ({
type: ' Post ',
URL: ' {{path (' Zm_member_get_salt ')}} ',
data: {
phone:phone,
type: 1
},
dataType: ' json ',
success:function (result) {
if (Result.flag = = 1) {
//alert (' success '); C30/>time (BTN);
} else {
alert (result.content);
}}}); </script>
The above is a small set of JS to introduce the user registration to obtain the message verification code and Countdown function, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. I also thank you for your support for the cloud-dwelling community website.