사용자 등록 시 SMS 인증코드 및 카운트다운 기능을 얻기 위한 샘플 코드 공유 JS 구현

사용자 등록 시에는 일반적으로 인증코드라는 문자 메시지가 필요하며, 인터랙티브 효과를 위해서는 카운트다운도 추가되어야 합니다.

효과는 다음과 같습니다.

<p class="user-form">
<form action="{{ path(&#39;zm_member_register&#39;) }}" method="post">
<p class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</p>
<p class="form-list">
<label class="register-label">验证码</label>
<input class="input-short" type="text" name="sms_salt" placeholder="请输短信验证码" />
<input class="input-code" id="btn" type="button" value="发送验证码" />
</p>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</p>

여기서 인증코드는 이 URL을 통해 백그라운드로 전달됩니다({{ path('zm_member_get_salt') }})) 내부에는 휴대폰 번호와 유형(유형=1이 등록)이라는 두 가지 값이 전달됩니다. 해당 값이 백그라운드에서 성공적으로 수신되면 성공 상태 값이 전달됩니다. 반환됩니다.

이를 바탕으로, 즉 판정이 성공한 이후에 인증코드 카운트다운이 구현됩니다. 캡슐화된 카운트다운 함수 time()을 호출하세요. 이때 인증 코드는 유형 버튼의 입력을 사용해야 하므로 해당 값을 쉽게 변경하여 카운트다운 시간을 표시할 수 있습니다.

<script type="text/javascript">
//倒计时60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取动态码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$(&#39;.input-code&#39;).click(function() {
var phone = $(&#39;.regphone&#39;).val();
$.ajax({
type: &#39;post&#39;,
url: "{{ path(&#39;zm_member_get_salt&#39;) }}",
data: {
phone: phone,
type: 1
},
dataType: &#39;json&#39;,
success: function (result) {
if (result.flag == 1) {
// alert(&#39;成功&#39;);
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

위 내용은 사용자 등록 시 SMS 인증번호와 카운트다운 기능을 얻기 위해 JS에서 공유하는 샘플 코드의 내용입니다. .php.cn)!