制作一个简单的界面，实现用户名、密码和确认密码的验证，并给与一定的提示消息

最新推荐文章于 2024-07-16 15:47:43 发布

້໌ᮨ昶

最新推荐文章于 2024-07-16 15:47:43 发布

阅读量1k

点赞数 1

文章标签： java servlet mybatis

本文链接：https://blog.csdn.net/qq_67505383/article/details/127081969

版权

<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>账户:</td>
				<td>
					<input type="text" id="uname" value="" onblur="check1()">
				</td>
				<td>
					<label id="msgl"></label>
				</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td>
					<input type="password" id="pwd1" value="" onblur="check2(1)">
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td>
					<input type="password" id="pwd2" value="" onclick="check3()">
				</td>
				<td>
					<label id="msg3"></label>
				</td>
			</tr>
			<tr>
				<td>家庭地址:</td>
				<td>
					<select name="province" id="" onchange="changeopt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="湖北省">--湖北省--</option>
						<option value="东北省">--东北省--</option>
					</select>
					<select name="province" id="" onchange="changeopt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南">--河南--</option>
						<option value="湖北">--湖北--</option>
						<option value="东北">--东北--</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" onclick="check4()">
				</td>
			</tr>
		</table>
		<div id="result">

		</div>
		<script type="text/javascript">
			function check1() {
				var reg = /^[a-zA-Z]{6,}$/
				var usname = document.getElementById("uname").value
				if (reg.test(usname)) {
					document.getElementById("msgl").innerHTML = "用户名格式正确"
					return true
				} else {
					document.getElementById("msgl").innerHTML = "用户名格式错误，请重新输入"
					return false
				}
			}

			function check2() {
				var pww = /^[a-zA-Z]{6,}$/
				var pwd1 = document.getElementById("pwd1").value
				if (pww.test(pwd1)) {
					document.getElementById("msg2").innerHTML = "密码正确"
					return true
				} else {
					document.getElementById("msg2").innerHTML = "密码格式错误，请重新输入"
					return true
				}
			}

			function check3() {
				var pwd1 = document.getElementById("pwd1").value
				var pwdss = document.getElementById("pwd2").value
				if (pwd1 == pwdss) {
					document.getElementById("msg3").innerHTML = "密码正确"
					return true
				} else {
					document.getElementById("msg3").innerHTML = "密码和第一次不一样"
					return false
				}
			}

			function check4() {
				if (check1() && check2() && check3()) {
					alert("提交成功")
				} else {
					alert("提交错误")
				}
			}
		</script>

如图