js表单验证注册

最新推荐文章于 2024-05-14 23:02:02 发布

AC喵

最新推荐文章于 2024-05-14 23:02:02 发布

阅读量545

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44190259/article/details/108838406

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
代码实现部分

前言

js表单验证是js里面较为基础的操作。

代码实现部分

代码如下：

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span{
				color:red;
				font-size:12px;
			}
		</style>
	</head>
	<body background="1.jpg">
		<script type="text/javascript">
			window.onload=function(){
				
				var height=document.body.scrollHeight;
				　　    var logo_wrap=document.getElementById("userForm");
				　　    var margin_top=(height-5)/2;       //因为此div在页面中只用了一次且以后不会改变，所以写了数值，如果是不确定的，获取到高度放着这里就可以
				　　    logo_wrap.style.marginTop=margin_top+"px";
				
				//用户名设定
				//获取username的span标签
				var usernameErrorSpan=document.getElementById("usernameError");
				//给用户名文本框绑定blur事件
				var usernameElt=document.getElementById("username");
				//失去焦点事件
				usernameElt.onblur = function(){
						var username = usernameElt.value;
						//去除空白
						username=username.trim();
						if(username===""){
							usernameErrorSpan.innerText="用户名不能为空";
						}else{
							if(username.length<6||username.length>14){
								//用户名长度非法
								usernameErrorSpan.innerText="用户名长度必须在6-14中间"
							}else{
								//用户长度合法
								//判断是否有特殊符号（正则表达式判断）
								var regExp=/^[A-Za-z0-9]+$/;
								var ok=regExp.test(username);
								if(ok){
									//用户名合法
								}else{
									usernameErrorSpan.innerText="用户名必须为数字或者字母"
								}
							}
						}
				}
				usernameElt.onfocus = function(){		
					//清空非法value
					if(usernameErrorSpan.innerText !=""){
						usernameElt.value = "";
					}else{
						
					}
					usernameErrorSpan.innerText ="";
				}
				
				//密码设定
				//获取密码框对象
				var userpwdElt=document.getElementById("userpwd");
				//获取密码文本框后面报错
				var userpwdErrorSpan=document.getElementById("pwdError");
				//绑定blur事件
				userpwdElt.onblur=function(){
					//获取密码
					var userpwd=userpwdElt.value;
					//去除空白
					userpwd=userpwd.trim();
					if(userpwd===""){
						userpwdErrorSpan.innerText="密码不能为空";
					}else{
						if(userpwd.length<8||userpwd.length>14){
							//密码长度非法
							userpwdErrorSpan.innerText="密码长度必须在8-14中间"
						}else{
							
						}
					}
					
				}
				userpwdElt.onfocus = function(){
					//清空非法value
					if(userpwdErrorSpan.innerText !=""){
						userpwdElt.value = "";
					}else{
						
					}
					userpwdErrorSpan.innerText ="";
				}
				
				//确认密码
				//获取确认密码框对象
				var userpwd2Elt=document.getElementById("userpwd2");
				//确认密码文本框后面报错
				var userpwd2ErrorSpan=document.getElementById("pwd2Error");
				//绑定blur事件
				userpwd2Elt.onblur=function(){
					//获取密码和确认密码
					var userpwd2=userpwd2Elt.value;
					var userpwd=userpwdElt.value;
					if(userpwd!=userpwd2){
						userpwd2ErrorSpan.innerText="密码不一致";
					}else{
						//密码确认一致
						userpwd2ErrorSpan.innerText="";
					}
				}
				userpwd2Elt.onfocus = function(){
					//清空非法value
					if(userpwd2ErrorSpan.innerText !=""){
						userpwd2Elt.value = "";
					}else{
						
					}
					userpwd2ErrorSpan.innerText ="";
				}
				
				//邮箱验证
				//获取email的span标签
				var emailErrorSpan=document.getElementById("emailError");
				//给用户名文本框绑定blur事件
				var emailElt=document.getElementById("email");
				//失去焦点事件
				emailElt.onblur = function(){
						var email = emailElt.value;
						//去除空白
						email=email.trim();
						if(email===""){
							emailErrorSpan.innerText="邮箱不能为空";
						}else{
							//判断是否有特殊符号（正则表达式判断）
							var regExp2=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
							var ok=regExp2.test(email);
							if(ok){
								//邮箱合法
							}else{
								emailErrorSpan.innerText="邮箱格式不正确"
							}
						}
				}
				emailElt.onfocus = function(){		
					//清空非法value
					if(emailErrorSpan.innerText !=""){
						emailElt.value = "";
					}else{
						
					}
					emailErrorSpan.innerText ="";
				}
				
				//给提交按钮绑定鼠标单击事件
				var submitBtnElt = document.getElementById("submitBtn");
				submitBtn.onclick=function(){
					//触发username的blur userpwd2的blur email的blur
					usernameElt.focus();
					usernameElt.blur();
					
					userpwdElt.focus();
					userpwdElt.blur();
					
					emailElt.focus();
					emailElt.blur();
					
					if(usernameErrorSpan=="" && userpwd2ErrorSpan=="" && userpwdErrorSpan=="" && emailErrorSpan==""){
						//获取表单对象
						var userFormElt = document.getElementById("userForm");
						//提交表单
						userFormElt.submit();
					}
				}
				
			}
		</script>
		
		<!--action="http://localhost:8080/js%20program/表单验证.html"-->
		<form id="userForm" action="http://localhost:8080/js program/表单验证" method="get">
			<div style="text-align:center;vertical-align:middel;">
			<font color="black" size="6">XXXX宿舍水电管理系统注册</font><br><br><br><br>
			用户名<input type="text" name="username" id="username" /><span id="usernameError"></span><br><br>
			密码<input type="text" name="userpwd" id="userpwd"/><span id="pwdError"></span><br><br>
			确认密码<input type="text" id="userpwd2" /><span id="pwd2Error"></span><br><br>
			邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br><br>
			<input type="submit" value="注册" id="submitBtn"  />
			<input type="reset" value="重置" />
			</div>
		</form>
	</body>
</html>

该处使用的url网络请求的数据。

AC喵

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js表单验证注册

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言代码实现部分前言js表单验证是js里面较为基础的操作。代码实现部分代码如下：<!DOCTYPE html><html > <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span{ color:red;
复制链接

扫一扫