手机验证码原理：
主要是验证用户填写的手机号码真实性。原理：在后端随机生成几位数字，通过API以短信形式发送至用户的手机上，用户将收到的数字串填入验证码表单。然后获取表单中的验证码，与之前生成的验证码对比，如果相等，则验证码有效，如果不等，就无效，需要用户重新验证。
聚合数据的短信API是个不错的选择，以下是JS+HTML+PHP实现
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="__PUBLIC__/css/style.css"/>
<script src="__PUBLIC__/js/jquery-3.2.1.js"></script>
<title>标题</title>
<script type="text/javascript">
$(document).ready(function() {
$("#getyzm").click(function () {
var val = $(this).html();
if(val == '已发送'){
//alert('okok');
}else {
var phone = $("#username").val();
var data = [];
var url = "{:U('Index/yzphone')}";
if(phone ==""){
alert("请填入手机号码");
}else {
$("#getyzm").html("已发送");
$("#getyzm").css("background-color","#cccccc");
$("#username").attr("readonly","readonly");
//alert("ok");
$.ajax({
type: "POST",
url: url,
data: {'phone': phone},
dataType: "json",
success: function(result){
if(result.bools=='false') {
alert(result.mes);
}else {
alert(result.mes);
}
}
});
}
}
});
});
//注册时验证
var regi ={
check:function () {
var username = $('input[name="username"]').val();
var yzm = $('input[name="yzm"]').val();
var password = $('input[name="password"]').val();
if(!username){
alert('手机号码必须填写');
exit();
}
if(!yzm){
alert('验证码必须填写');
exit();
}
if(!password){
alert('密码必须设置');
exit();
}
var url = "{:U('Index/wregister')}";
$.ajax({
type: "POST",
url: url,
data: {'username': username,'yzm':yzm,'password':password},
dataType: "json",
success: function(result){
if(result.num==0) {
alert(result.mes);
exit();
}else {
//alert(result.mes);
var id = result.id;
location.href = "{:U('home/member/index')}?id="+id;
}
}
});
}
}
</script>
</head>
<body style="background: #ececec;">
<div class="logo2" style="margin-top: 100px; margin-bottom: 50px;"><a href="{:U('Index/index')}"></a> <img src="__PUBLIC__/img/home/logo2.jpg"/> </div>
<form id="regi_form" method="post">
<div class="login-input"><input type="text" id="username" name="username" placeholder="输入手机号">
<div class="hqyz" id="getyzm"/>获取验证码</div>
</div>
<div class="login-input" style="background: none;"><input type="text" name="yzm" placeholder="4位验证码"></div>
<div class="login-input"><input type="text" name="password" placeholder="输入密码"></div>
<div class="submit"><button id="register" onclick="regi.check()">提交注册</button></div>
</form>
<div class="su" style="margin-top: 15px;">点击提交注册即表示你已阅读并同意<a href="{:U('Index/clause')}" target="_blank">《服务条款》</a> </div>
<div class="su" style="margin-top: 15px;">已有帐号？<a href="{:U('Index/login')}">直接登录</a> </div>
<div class="su"></div>
<div class="su">© </div>
</body>
</html>PHP
//验证手机号码和生成验证码
public function yzphone(){
if(IS_POST){
$username =I('post.phone');
$bool = self::isMobile($username);
if($bool){
//号码格式没问题
$user = M("user");
$ret = $user->where(array('username'=>$username))->find();
if(is_array($ret) && !empty($ret)){
echo json_encode(array('bools'=>false,'mes'=>'本号码已被注册'));
}else{
$code = self::getcode();
//session(array('yzm'=>$code,'expire'=>600));
session('yzm',$code);
$session_code = session('yzm');
//发送短信
$sendUrl = 'http://v.juhe.cn/sms/send'; //短信接口的URL
$smsConf = array(
'key' => '56b3f6982e056618f8a4eeae8d50821d', //您申请的APPKEY
'mobile' => $username, //接受短信的用户手机号码
'tpl_id' => '17845', //您申请的短信模板ID，根据实际情况修改
'tpl_value' =>urlencode('#code#='.$code.'&#company#=著名客') //您设置的模板变量，根据实际情况修改
);
$content = self::juhecurl($sendUrl,$smsConf,1); //请求发送短信
if($content){
$result = json_decode($content,true);
$error_code = $result['error_code'];
if($error_code == 0){
//状态为0，说明短信发送成功
echo json_encode(array('bools'=>true,'mes'=>'短信发送成功'.$session_code));
//echo "短信发送成功";
}else{
//状态非0，说明失败
echo json_encode(array('bools'=>false,'mes'=>'短信发送失败，请重试'));
}
}else{
//返回内容异常，以下可根据业务逻辑自行修改
echo json_encode(array('bools'=>false,'mes'=>'短信已发送，未收到请重试'.$session_code));
}
}
}else{
echo json_encode(array('bools'=>false,'mes'=>'手机填写不正确'));
}
}
}
/**
* 请求接口返回内容
* @param string $url [请求的URL地址]
* @param string $params [请求的参数]
* @param int $ipost [是否采用POST形式]
* @return string
*/
public function juhecurl($url,$params=false,$ispost=0){
$httpInfo = array();
$ch = curl_init();
curl_setopt( $ch, CURLOPT_HTTP_VERSION , CURL_HTTP_VERSION_1_1 );
curl_setopt( $ch, CURLOPT_USERAGENT , 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22' );
curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT , 30 );
curl_setopt( $ch, CURLOPT_TIMEOUT , 30);
curl_setopt( $ch, CURLOPT_RETURNTRANSFER , true );
if( $ispost )
{
curl_setopt( $ch , CURLOPT_POST , true );
curl_setopt( $ch , CURLOPT_POSTFIELDS , $params );
curl_setopt( $ch , CURLOPT_URL , $url );
}
else
{
if($params){
curl_setopt( $ch , CURLOPT_URL , $url.'?'.$params );
}else{
curl_setopt( $ch , CURLOPT_URL , $url);
}
}
$response = curl_exec( $ch );
if ($response === FALSE) {
//echo "cURL Error: " . curl_error($ch);
return false;
}
$httpCode = curl_getinfo( $ch , CURLINFO_HTTP_CODE );
$httpInfo = array_merge( $httpInfo , curl_getinfo( $ch ) );
curl_close( $ch );
return $response;
}
//验证手机号是否正确
public function isMobile($mobile) {
if (!is_numeric($mobile)) {
return false;
}
return preg_match('#^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$#', $mobile) ? true : false;
}
//生成四位验证码
function getcode(){
$code = rand(1000,9999);
return $code;
}本例在后端生成的验证码存放在session中，这样方便采用比对，但比对完后，需要清空该session，否则占用资源。
扫一扫
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
