Implementación de la función de obtención de código de verificación de SMS y cuenta regresiva en el registro del usuario con JS

Al registrarse, el usuario generalmente necesita un código de verificación de短信, y también es necesario agregar un temporizador para mejorar la interacción.

Efecto como follows:

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">Número de teléfono</label>
<input class="regphone input-register" type="text" name="phone" placeholder="Por favor, ingrese el número de teléfono" />
</div>
<div class="form-list">
<label class="register-label">Código de verificación</label>
<input class="input-short" type="text" name="sms_salt" placeholder="Por favor, ingrese el código de verificación de短信" />
<input class="input-code" id="btn" type="button" value="Enviar código de verificación" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="Enviar" />
</form>
</div>

El captcha aquí se obtiene al enviar el número de teléfono y el tipo (type=) a esta url ({ { path(‘zm_member_get_salt') }})) en el servidor.1Para el registro (register) y estos dos valores, si el servidor recibe los valores con éxito, devuelve el estado de éxito.

Basado en esto, se implements un temporizador de captcha, que puede llamarse a la función de temporizador encapsulada time() después de que se juzgue exitosamente. Tenga en cuenta que el captcha debe usar un input de tipo button, en este momento puede cambiar fácilmente su valor para mostrar el tiempo del temporizador.

<script type="text/javascript">
//Cuenta regresiva60 segundos
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="Obtener código dinámico";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="Reenviar (" + 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('Éxito');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

Lo mencionado anteriormente es lo que el editor les ha presentado sobre la implementación de la función de verificación de código de短信 y el temporizador de cuenta regresiva en JS, espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También agradezco mucho el apoyo de todos a la página web de tutorial de alarido.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y se carga por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w3Avisos: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y se carga por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.