jsp页面完成注册功能（验证码和手机验证码）

web项目的开头一般都是登录和注册，有一个看着很强的登录注册页面，就会突然感觉自己有了底气哈哈哈，最近刚完成了一个注册的页面，其中包括了随机产生图片验证码（https://blog.csdn.net/qq_45147812/article/details/105104495），验证码输入正确后发送手机验证码，手机验证码正确后，检查手机号是否被注册过，密码两次输入是否相同，以及只有同意协议才能注册等功能，下面就是我的页面展示


下面附上部分代码：

• 组件

<div class="modal-body align-w3">
			<div>
				<p align="center">用户注册</p>
			</div>
			<form action="SaveClient" method="post" class="p-sm-3"
				onsubmit="return check()">
				<div class="form-group">
					<label for="recipient-name" class="col-form-label">用户名</label> <input
						type="text" class="form-control" placeholder="用户名" name="Name"
						id="recipient-name" required="">
				</div>
				<div class="form-group">
					<label for="recipientphone" class="col-form-label">手机号码</label> <input
						type="phone" class="form-control" placeholder="*** **** ****"
						name="Phone" id="recipientphone" required="">
				</div>
				<div class="form-group">
					<label for="password1" class="col-form-label">密码</label> <input
						type="password" class="form-control" placeholder="******"
						name="Password" id="password1" required="">
				</div>
				<div class="form-group">
					<label for="password2" class="col-form-label">确认密码</label> <input
						type="password" class="form-control" placeholder="******"
						name="Confirm Password" id="password2" required=""> 
					<span id="tishi"></span>
				</div>
				<div class="form-group">
					<label for="verifyCode" class="col-form-label">验证码</label> <input
						type="test" class="form-control" name="verifyCode" id="verifyCode">

				</div>
				<div class="form-group ">
					<span><img src="ValidateCodeServlet" id="validateCode"
						title="点击换一换" onclick="changeValidateCode()"></span> <span><a
						href="javascript:changeValidateCode();">看不清?</a></span> <span id="sp1"></span>
					<span>
						<div class="text-right">
							<input type="button" class="btn btn-primary btn-outline"
								value="发送验证码" id="sendMessage" onclick="test();">

						</div>
					</span>
				</div>
				<div class="form-group">
					<label for="message" class="col-form-label">手机验证码</label> <input
						type="test" class="form-control" name="message" id="message">

				</div>

				<div class="sub-w3l">
					<div class="sub-w3layouts_hub">
						<input type="checkbox" id="brand2" value="0"
							onclick="if(this.checked){enable()} else {disable()}"> <label
							for="brand2" class="mb-3 text-secondary"> <span></span>我同意
						</label>
					</div>
				</div>


				<div class="right-w3l">
					<input type="submit" disabled="true" class="form-control bg-theme"
						value="注册" id="subbtn">
				</div>
			</form>
		</div>

• script函数

//更换验证码图片
function changeValidateCode() {
	      document.getElementById("validateCode").src = "ValidateCodeServlet?rand="
	              + Math.random();
	    }
	    
//判断两次密码是否一致
function check(){
		var p1=document.getElementById("password1").value;
		var p2=document.getElementById("password2").value;
		
		if(p1!=p2){
			document.getElementById("tishi").innerHTML="<br><font color='red'>两次输入密码不一致!</font>";
	        return false;
		}
	}
//提交按钮是否有效，只有确认按钮被选中才更改状态
function disable(){
		document.getElementById("subbtn").disabled=true;
	}
	function enable(){
		document.getElementById("subbtn").disabled=false;
	}
//发送手机验证码并在servlet中判断验证码是否正确	，这里提供了两种方式，都可以完成点击按钮，判断验证码是否正确，正确发送短信，不正确提示验证码输入正确，两种情况都不会跳转到其他页面（还在本页面，不曾跳转到其他页面）
function test()
	    {
	        //alert("已发送");
	        $.ajax({
	                url:'<%=path%>/SendVarifyCodeServlet',
	                dataType: "json",
	                data:{
	                	verifyCode:$("#verifyCode").val(),
	                	recipientphone:$("#recipientphone").val()
	                },
	                type :'GET',
	                success:function(data)
	                {
	                    alert("成功");
	                }
	            });
	    }
	    
	    function send(){
			var verifyCode=document.getElementById("verifyCode").value;
			var phone=document.getElementById("Phone").value;
			window.location="<%=path%>/SendVarifyCodeServlet?verifyCode=" +verifyCode+"&recipientphone="+recipientphone;
	    }

不使用servelet用静态网页可以参考https://blog.csdn.net/qq_45147812/article/details/105103668