JS关于登录页面使用手机验证码登录

这两天在弄一个项目，登录页面打算用手机验证码登录。

需要使用到 jQuery和 ajax

用于验证手机号码输入框

分别判断以下情况并作出弹窗警告

1：是否为空

2：是否为11位数字

3：是否是13，15,17, 18开头的正确手机号码

输入框下面添加一个获取验证码的按钮，默认为关闭不可点击，

点击后出现倒计时

并调用后台servlet生成一个验证码

在验证上面3种情况之后，得到为正确手机号码后

再将验证码按钮设置为可点击

前端完整代码如下：

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

<!DOCTYPE html>
<html>
<head>
<title>MOBAN</title>
<link href="<%=path %>/css/user_login_style.css" rel='stylesheet' type='text/css' />
 
<script type="text/javascript" src="<%=path%>/js/jquery-1.7.2.min.js" ></script>

<script type="text/javascript"> 
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }

  

    var countdown=60;  
    function settime(val) {
    
  
    if (countdown == 0) {  
        val.removeAttribute("disabled");  
        val.value="获取验证码";  
        countdown = 60;  
        return false;  
    } else {  
        val.setAttribute("disabled", true);  
        val.value="重新发送(" + countdown + ")";  
        countdown--; 
    }

    setTimeout(function() {  
        settime(val);    
        },1000);  
         
    }
    
      function  code(){
           $.ajax({
                     type: "POST", //用POST方式传输
                     dataType: "text", //数据格式:JSON
                     url: '<%=path%>/servlet/RandomCodeServlet', //目标地址 
                     error: function (XMLHttpRequest, textStatus, errorThrown) { },
                     success: function (msg){ }
                  });
     }
     

	 

	function input(mobile) {
	    var btn=1;
	    document.getElementById("code_btn").disabled=true;
		if (mobile.length == 0) {
			alert('请输入手机号码！');
			btn = 0;
			document.form1.mobile.focus(); 
			return false; 
		} 
		
		if (mobile.length != 11) {
			alert('请输入长度11位手机号码！');
			btn = 0;
			document.form1.mobile.focus();
			return false;
		} 

		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if (!myreg.test(mobile)) {
			alert('请输入有效的手机号码！');
			btn = 0;
			document.form1.mobile.focus();
			return false;
		} 
		
		if(btn==1){
		   document.getElementById("code_btn").disabled=false;
		}
	}
</script>
 
</head>
<body>
	<h1>App Location Form</h1>
		<div class="app-location">
			<h2>欢迎使用饿了吧</h2> 
			 
			<form>
				<input type="text" class="text" name="phone" id="phone_num"  onblur="input(this.value)"  value="请输入手机号码" onFocus="this.value = '';"  >
				 
				<input type="text" value="请输入验证码" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '请输入验证码';}">
               
				<input type="button" id="code_btn" disabled="true"  onclick="code(),settime(this);" value="获取验证码" >
				 
				<div class="submit"> 
					<input type="submit" value="登录" > 
				</div>
				
				 
				<div class="clear"></div> 
			</form>
		</div>
	 
</body>
</html>

JS关于登录页面使用手机验证码登录

猜你喜欢