注册表单ajax局部验证以及提交form表单的局部验证

最新推荐文章于 2021-08-05 13:44:31 发布

还有诗和远方

最新推荐文章于 2021-08-05 13:44:31 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38776985/article/details/79833352

这篇博客介绍了如何使用Ajax实现注册表单的局部验证，包括手机号、用户名、密码和验证码的验证。通过JavaScript和jQuery进行前端验证，并展示了发送短信验证码的功能，以及在用户点击注册按钮时的验证逻辑。同时，它还涵盖了用户输入的手机号格式检查和手机号的唯一性检查。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>鲜果源-果果注册</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var InterValObj; //timer变量，控制时间
var count = 30; //间隔函数，1秒执行
var curCount;//当前剩余秒数

$(document).ready(function(){
//6.获取验证码-点击获取验证码事件
//获取按钮点击事件
$('#sendmessage').click(function(){
//获取输入的电话值
var phone=$('#phone').val();
//alert(phone);
//alert("我被点击了");
if(phone.length!=0){
  $.post("sms",{"phone":phone},function(data){//给获取的手机号发送验证码
   //5.验证输入的验证码
   //定义验证码失去焦点的函数
   $('#writemessage').blur(function (){
     //获取输入的验证码
     var v=$('#writemessage').val();
     var val=parseInt(v);
     //alert(typeof(val)+"v"+val);
     //alert(v.length);
     var tdata=parseInt(data);
     //alert(typeof(tdata)+"tdata"+tdata);
    if(val==tdata){
     $(this).data("s",1);
     //alert($(this).data("s"));
     $('#messagep').html("<font color='lightgreen'>√</font>");
    }else{
     //如果输入为空
     $(this).data("s",0);
     //alert($(this).data("s"));
     $('#messagep').html("<font color='red'>×</font>");
    }
   });
  });
}else{
  $('#messagep').html("<font color='red'>×输入手机号不正确</font>");
  $(this).data("s",0);
}
});

//判断手机号是否正确怕末端手机号
   $('#writemessage').blur(function (){
     //获取输入的验证码
     var v=$('#writemessage').val();
     //alert(v.length);
     if(v.length==0){
     //如果输入为空
      $(this).data("s",0);
      $('#messagep').html("<font color='red'>×</font>");
     }
   });

});
</script>

  //注册提交
  function doclick(){
   //alert("我被点击了");
   $("#username").blur();
   $("#userpass").blur();
   $("#comfirm_userpass").blur();
   $("#phone").blur();
   $("#writemessage").blur();
   $(".auth").each(function(){
   for(i=5;i>$(this).data('s');i--){
    //alert(typeof(i)+"i");
   }
   //alert(i);
   if(i==1){
    $('#LoginForm').submit();
   }



   });

  }

</script>
</head>
<body>

<div class="register-container">
<h1>鲜果源用户注册</h1>

<div class="connect">
  <p>Fresh Fruit , Share to world.</p>
</div>

<form action="register" method="post" id="LoginForm" >
  <div>
   <input type="text" name="username" id="username" class="auth" placeholder="您的用户名" autocomplete="off" onblur="docheckname(this)"/>
   <p id="usernamep"></p>
  </div>
  <div>
   <input type="password" name="userpass" id="userpass" class="auth" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" onblur="doCheckPass(this)" />
   <p id="userpassp"></p>
  </div>
  <div>
   <input type="password" name="confirm_password" id="confirm_userpass" class="auth" placeholder="再次输入密码" oncontextmenu="return false" onblur="doCheckConfirmPass(this)" onpaste="return false" />
   <p id="confirm_userpassp"></p>
  </div>
  <div>
   <input type="text" id="phone" name="phone_number" class="auth" placeholder="输入手机号码" autocomplete="off" id="number" onblur="doYanZhengPhone(this)"/>
   <p id="phonep"></p>
  </div>
  <div>
  <input type="text" class="auth" placeholder="验证码" id="writemessage" name="writemessage" />
  <p id="messagep"></p>
  </div>
  <div>
  <button type="button" id="sendmessage" name="yanzhengcode" value="获取验证码" onclick="dosend()" >点击获取验证码</button>
  </div>
  <div>
   <button type="button" onclick="doclick()">注册</button>
  </div>
</form>
<a href="shoplogin.jsp">
  <button type="button" class="register-tis">已经有账号？</button>
</a>
</div>

<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>

</body>

</html>