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

通过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">清输入420位由英文数字和下划线组成的字符串,且数字不能作为开头</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">非空白字符620</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>

页面效果如下:
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的百度登录页面的 HTMLCSSJavaScript 代码,包括表单验证和输入用户名后的判断是否符合要求的功能: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>百度登录</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>百度登录</h1> <form id="login-form" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <span id="username-error" class="error-message"></span> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <span id="password-error" class="error-message"></span> <input type="submit" value="登录"> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` .container { margin: 0 auto; width: 400px; } h1 { text-align: center; } label { display: block; margin-top: 20px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { display: block; margin-top: 20px; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .error-message { color: red; display: block; margin-top: 5px; } ``` JavaScript 代码: ``` const form = document.getElementById("login-form"); const username = document.getElementById("username"); const password = document.getElementById("password"); const usernameError = document.getElementById("username-error"); const passwordError = document.getElementById("password-error"); form.addEventListener("submit", function(event) { event.preventDefault(); if (validateUsername() && validatePassword()) { alert("登录成功!"); } }); function validateUsername() { if (username.value === "") { usernameError.textContent = "用户名不能为空!"; return false; } else if (username.value.length < 6) { usernameError.textContent = "用户名长度不能少于6个字符!"; return false; } else { usernameError.textContent = ""; return true; } } function validatePassword() { if (password.value === "") { passwordError.textContent = "密码不能为空!"; return false; } else if (password.value.length < 6) { passwordError.textContent = "密码长度不能少于6个字符!"; return false; } else { passwordError.textContent = ""; return true; } } ``` 这段代码中,我们使用了 HTML5 中的 required 属性来确保用户名和密码都不能为空。在 JavaScript 中,我们使用了事件监听器来监听 form 的 submit 事件,并阻止了默认的表单提交行为。然后,我们分别编写了 validateUsername() 和 validatePassword() 函数来验证用户名和密码是否符合要求。如果表单验证通过,我们就弹出一个提示框表示登录成功。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值