js关于账号注册页面的表单提交（账号以及密码自动判断是否符号设定的要求）

最新推荐文章于 2023-11-17 12:25:08 发布

empty..

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量1.1k

点赞数 3

分类专栏： javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_43502249/article/details/107580758

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过js写的表单并且提交页面，账号以及密码自动判断是否符号设定的要求
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>账号注册</title>
		<style type="text/css">
			.message{
				display: inline-block;
				font-size: 12px;
				color: #333;
				padding: 1px 3px;
				border: 1px solid #ccc;
			}
		</style>
		<script type="text/javascript">
			function checkUsername(){
				//获取输入框中的value值
				var inputOb = document.getElementsByName('username')[0];
				var v = inputOb.value;
				var re=/^[a-z_]{1}[a-z0-9_]{3,19}$/.test(v);
				var divOb = document.getElementById('m_username');
				if(re){
					//提示 输入正确
					divOb.innerHTML = "输入正确";
					divOb.style.border = "1px solid green";
					divOb.style.color = "green";
					return true;
				}
				else{
					//提示 输入错误
					divOb.innerHTML = "输入错误";
					divOb.style.border = "1px solid red";
					divOb.style.color = "red";
					return false;
				}
			}
			function checkPassword(v){
				//获取密码框中输入的内容
				var re = /^\S{6,20}$/.test(v);  //[\S]---表示，非空白就匹配
				var divPassword = document.getElementById('m_password');
				if(re){
					divPassword.innerHTML = "密码输入正确";
					divPassword.style.border = "1px solid green";
					divPassword.style.color = "green";
					return true;
				}
				else{
					divPassword.innerHTML = "密码输入错误";
					divPassword.style.border = "1px solid red";
					divPassword.style.color = "red";
					return false;
				}
			}
			function checkRepassword(v1){
				//获取密码值
				var v = document.getElementsByName('password')[0].value;
				//v1 确认密码中的内容
				if(v1 != '' && v == v1){
					document.getElementById('m_repassword').innerHTML = "确认成功";
					document.getElementById('m_repassword').style.color = "green";
					document.getElementById('m_repassword').style.border = "1px solid green";
					return true;
				}
				else{
					document.getElementById('m_repassword').innerHTML = "确认失败";
					document.getElementById('m_repassword').style.color = "red";
					document.getElementById('m_repassword').style.border = "1px solid red";
					return false;
				}
			}
			//显示起初的提示内容
			function setUsername(){
				var ob = document.getElementById('m_username');
				ob.innerHTML = "请输入4到20位由英文字母数字和下划线组成的字符串，且数字不能作为开头";
				ob.style.border = "1px solid #ccc";
				ob.style.color = "#333";
			}
			function setPassword(){
				var ob = document.getElementById('m_password');
				ob.innerHTML = "非空白字符6到20位";
				ob.style.border = "1px solid #ccc";
				ob.style.color = "#333";
			}
			function setrePassword(){
				var ob = document.getElementById('m_repassword');
				ob.innerHTML = "请确认密码";
				ob.style.border = "1px solid #ccc";
				ob.style.color = "#333";
			}
			function submitFun(){
				var formOb = document.forms[0];
				//用户输入数据全部合法了才提交
				var re1 = checkUsername();//验证用户名
				//验证密码
				var v = document.getElementsByName('password')[0].value;
				var re2 = checkPassword(v);
				//确认密码
				var v1 = document.getElementsByName('repassword')[0].value;
				var re3 = checkRepassword(v1);
				if (re1 && re2 && re3){
					formOb.submit();
				}				
			}
		</script>
	</head>
	<body>
		<form action="sava.php" method="post">
			<table class="t1" width="100%">
				<tr>
					<td>
						<h1>注册</h1>
					</td>
				</tr>
				<tr>
					<td width="80px">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</td>
					<td width="170px"><input onfocus="setUsername();" onblur="checkUsername();" type="text" name="username" /></td>
					<td><div class="message" id="m_username">清输入4到20位由英文数字和下划线组成的字符串，且数字不能作为开头</div></td>
				</tr>
				<tr>
					<td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
					<td><input type="password" onfocus="setPassword()" onblur="checkPassword(this.value)" name="password" /></td>
					<td><div class="message" id="m_password">非空白字符6到20位</div></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" onfocus="setrePassword();" onblur="checkRepassword(this.value);" name="repassword" /></td>
					<td><div class="message" id="m_repassword">请确认密码</div></td>
				</tr>
				<tr>
					<td colspan="3"><input type="button" onclick="submitFun();" value="注册"></td>
				</tr>
			</table>
		</form>
	</body>
</html>