跳至主要內容

注册验证表单6form01.html

游鹄君2025年8月24日大约 5 分钟jqueryjquery前端
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单验证(注册)</title>
  <style type="text/css">
  *{margin:0px;padding:0px;}
  #all{width:570px;height:400px;margin:30px auto}
  table{width:570px;height:400px;border-collapse:collapse;}
  .into{text-align:right;padding-right:20px;width:130px;}
  input{width:160px;height:30px;border:solid 1px #333;margin-left:10px;}
  .cur{border:solid 2px lightblue;}  
  </style>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
  <script type="text/javascript" src='jquery-color.js'></script>
</head>
<body>
  <div id='all'>
    <form action="register.php" method='post' id='forms'>
     <table border='1'>
       <caption><h1>用户注册</h1></caption>
       <tr>
         <td class='into'>用户名:</td>
         <td><input type="text" name='username'><span> *请输入6~18位用户名</span></td>
       </tr>
       <tr>
         <td class='into'>密码:</td>
         <td><input type="password" name='password'><span> *请输入6~12位密码</span></td>
       </tr>
       <tr>
         <td class='into'>确认密码:</td>
         <td><input type="password" name='repassword'><span> *再次输入密码</span></td>
       </tr>
       <tr>
         <td class='into'>手机号:</td>
         <td><input type="phone" name='phone'><span> *请输入手机号码</span>&nbsp;<button id='but' style='width:100px;height:30px;font-size:17px'>获取验证码</button></td>
       </tr>
       <tr>
         <td class='into'>验证码:</td>
         <td><input type="text" name='code'><span> *输入验证码</span></td>
       </tr>
       <tr>
         <td colspan='2' style='text-align:center'>
         <input type="submit" value='提交'>
         </td>
       </tr>
     </table>
    </form>
  </div>
  
</body>
  <script type="text/javascript">
 
  var UV = false;
  var PV = false;
  var RPV = false;
  var TEL = false;
  var CV = false;
  //alert($);
  //用户名
  //获取焦点
  $('input[name=username]').focus(function(){
    $(this).addClass('cur');
  })
 
  //失去焦点
  $('input[name=username]').blur(function(){
    //获取值
    var uv=$(this).val();
 
    //定义正则
    var reg=/^\w{6,12}$/;
 
    //检测
    var res=reg.test(uv);
    //判断
    if(!res)
    {
     $('input[name=username]').css('border','solid 1px #db192a');
     $('input[name=username]').next().text(' 用户名不正确').css('color','#db192a');
     UV = false;
    }
    else
    {
     //发送ajax
     $.post('6usercheck.php',{uv:uv},function(data){
       console.log(data);
       //判断
       if(data=='1')
       {
 
         $('input[name=username]').css('border','solid 1px #db192a');
         $('input[name=username]').next().text(' 用户已经存在').css('color','#db192a');
         UV = false;
       }
       else
       {
         $('input[name=username]').css('border','solid 1px green');
         $('input[name=username]').next().text(' √').css('color','green');
         UV = true;
       }
     });
    }
  })
 
  //密码
 
  //获取焦点
  $('input[name=password]').focus(function(){
    $(this).addClass('cur');
  })
  //失去焦点
  $('input[name=password]').blur(function(){
    //获取值
    var pv = $(this).val();
    //定正则
    var reg=/^\S{6,8}$/;
 
    //检测
    var res=reg.test(pv);
 
    //判断
    if(!res)
    {
     $(this).css('border','solid 1px #db192a');
     $(this).next().text(' 密码设置不正确').css('color','#db192a');
     PV = false;
 
    }
    else
    {
     $(this).css('border','solid 1px green');
     $(this).next().text(' √').css('color','green');
     PV = true;
 
    }
 
  })
 
  //确认密码
  //获取焦点
  $('input[name=repassword]').focus(function(){
 
    $(this).addClass('cur');
  })
  //失去焦点
  $('input[name=repassword]').blur(function(){
    //获取确认密码的值
    var rpv = $(this).val();
    //获取密码的值
    var pv = $('input[name=password]').val();
 
    if(rpv != pv){
 
     $(this).css('border','solid 2px #db192a');
     $(this).next().text(' *两次密码不一致').css('color','#db192a');
 
     RPV = false;
    } else {
     $(this).css('border','solid 2px green');
     $(this).next().text(' √').css('color','green');
 
     RPV = true;
    }
  })
 
  //手机号
  //获取焦点
  $('input[name=phone]').focus(function(){
 
    $(this).addClass('cur');
  })
  //失去焦点
  $('input[name=phone]').blur(function(){
    //获取手机号
    var ph = $(this).val();
    //正则
    var reg = /^1[34578]\d{9}$/;
    //检测
    if(!reg.test(ph)){
     $(this).css('border','solid 2px #db192a');
     $(this).next().text(' *手机号码不正确').css('color','#db192a');
 
     TEL = false;
    } else {
     $(this).css('border','solid 2px green');
     $(this).next().text(' √').css('color','green');
     TEL = true;
    }
  })
 
  //获取验证码
  $('#but').click(function(){
    //获取手机号
    var ph= $('input[name=phone]').val();
 
    //发送ajax
    $.post('yanzheng.php',{number:ph},function(data){
     console.log(data);
    })
 
 
    //阻止默认行为
    return false;
  })
 
 
  //输入验证码
  $('input[name=code]').focus(function(){
    $(this).addClass('cur');
  })
  //输完验证码
  $('input[name=code]').blur(function(){
 
    var cv = $(this).val();
 
    var cvs = $(this);
 
    $.post('codecheck.php',{cv:cv},function(data){
 
     // console.log(data);
     // console.log(data);
     if(data == '1'){
       cvs.css('border','solid 2px green');
       cvs.next().text(' √').css('color','green');
 
       CV = true;
     } else {
 
       cvs.css('border','solid 2px #db192a');
       cvs.next().text(' *验证码不正确').css('color','#db192a');
 
       CV = false;
 
     }
    })
  })
 
  //提交事件
  $('#forms').submit(function(){
 
    //判断
    if(UV && PV && RPV && TEL && CV){
 
     return true;
    }
 
 
    //阻止默认行为
    return false;
 
  })
 
  </script>
</html>

6usercheck.php

<?php
    $uv=$_POST['uv'];
    //$uv="youhu0001";
    //echo $uv;
    //链接数据库
    $pdo = new PDO('mysql:host=localhost;dbname=bbs192;charset=utf8','root','');
 
    //var_dump($pdo);
    //准备sql语句
    $sql="select * from user where userName='{$uv}';";
    //echo $sql;die;
    //执行
    $stmt=$pdo->query($sql);
    //var_dump($stmt);
    //获取预处理对象 解析
    $res=$stmt->fetch(PDO::FETCH_ASSOC);
    //var_dump($res);
    //判断
    if($res)
    {
     echo 1;
    }
    else
    {
     echo 0;
    }

codecheck.php

<?php
  session_start();
  
  $cv = $_POST['cv'];
 
  echo $cv;die;
  $cvs = $_SESSION['code'];
  //$cvs=666;
  echo $cvs;die;
  if($cv == $cvs){
    echo 1;
  }else{
    echo 0;
  }

yanzheng.php

<?php
session_start();
//载入ucpass类
require_once('lib/Ucpaas.class.php');
 
//初始化必填
$options['accountsid']='e3c59b09f5820677b49e61210c8d2df1';
$options['token']='1360af8985428193f1ba5b7bb6408586';
 
 
//初始化 $options必填
$ucpass = new Ucpaas($options);
 
//开发者账号信息查询默认为json或xml
 
echo $ucpass->getDevinfo('xml');
 
//申请client账号
//$appId = "xxxx";
//$clientType = "0";
//$charge = "0";
//$friendlyName = '';
//$mobile = "18612345678";
 
//echo $ucpass->applyClient($appId, $clientType, $charge, $friendlyName, $mobile);
 
//删除client账号
//$appId = "xxxx";
//$clientNumber='xxxxx';
 
//echo $ucpass->releaseClient($clientNumber,$appId);
 
//删除client账号
//$appId = "xxxx";
//$start = "0";
//$limit = "100";
//
//echo $ucpass->getClientList($appId,$start,$limit);
 
//以Client账号方式查询Client信息
//$appId = "xxxx";
//$clientNumber='xxxx';
//
//echo $ucpass->getClientInfo($appId,$clientNumber);
 
//以手机号码方式查询Client信息
//$appId = "xxxx";
//$mobile = "18612345678";
 
//echo $ucpass->getClientInfoByMobile($appId,$mobile);
 
//应用话单下载,通过HTTPS POST方式提交请求，云之讯融合通讯开放平台收到请求后，返回应用话单下载地址及文件下载检验码。
//day 代表前一天的数据（从00:00 – 23:59）；week代表前一周的数据(周一 到周日)；month表示上一个月的数据（上个月表示当前月减1，如果今天是4月10号，则查询结果是3月份的数据）
//$appId = "xxxx";
//$date = "day";
 
//echo $ucpass->getBillList($appId,$date);
 
//Client充值,通过HTTPS POST方式提交充值请求，云之讯融合通讯开放平台收到请求后，返回Client充值结果。
//$appId = "xxxx";
//$clientNumber='xxxx';
//$clientType = "0";
//$charge = "0";
 
//echo $ucpass->chargeClient($appId,$clientNumber,$clientType,$charge);
 
//双向回拨,云之讯融合通讯开放平台收到请求后，将向两个电话终端发起呼叫，双方接通电话后进行通话。
//$appId = "xxxx";
//$fromClient = "xxxx";
//$to = "18612345678";
//$fromSerNum = '';
//$toSerNum = '';
 
//echo $ucpass->callBack($appId,$fromClient,$to);
 
//语音验证码,云之讯融合通讯开放平台收到请求后，向对象电话终端发起呼叫，接通电话后将播放指定语音验证码序列
//$appId = "xxxx";
//$verifyCode = "1256";
//$to = "18612345678";
 
//echo $ucpass->voiceCode($appId,$verifyCode,$to);
 
//短信验证码（模板短信）,默认以65个汉字（同65个英文）为一条（可容纳字数受您应用名称占用字符影响），超过长度短信平台将会自动分割为多条发送。分割后的多条短信将按照具体占用条数计费。
$code=rand(111111,999999);
 
$appId = "e70fe1d6a3604a638a7388272955d19a";
 
$toNumber=$_POST['number'];
 
$SESSION['code']=$code;
//$to = "18612345678";
$templateId = "176706";
//$param="test,1256,3";
$param=$code;
 
echo $ucpass->templateSMS($appId,$toNumber,$templateId,$param);
//echo $ucpass->templateSMS($appId,$to,$templateId,$param);
游鹄君的博客
Copyright © 2025 游鹄君