案例：表单验证

最新推荐文章于 2024-07-12 14:10:05 发布

菊花侠大战桃花怪.

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量201

点赞数

分类专栏： Javascript 文章标签： javascript js java python

本文链接：https://blog.csdn.net/weixin_51221261/article/details/115425908

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

《JAVA啃骨头》之 Javascript 章节

案例：表单验证

需求：
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成，不能含有其他符号(正则表达)
(4)密码和确认密码一致，邮箱地址合法
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。
(7)文本框再次失去焦点后，清空错误提示信息，如果文本框的数据不合法，要求清空文本框的value
(8)最终表单中的所有项均合法后可提交

源码展示：

<html>
	<head>
	  <meta charset="utf-8">
	  <title>表单验证</title>
	  <style type="text/css">
      span{
		     color: red;
		     font-size: 12px;
		     font-style:oblique;
   	}		
	</style>
	</head>

<body background="005.jpg">
	<script type="text/javascript">
		window.onload = function(){
			
			var getUsername = document.getElementById("username");
			var usernameError1 = document.getElementById("usernameError");
			//先绑定一个blur事件
			getUsername.onblur = function(){
				//进行空处理
				var getUsername1 = getUsername.value;
				getUsername2=getUsername1.trim();
				
				//热点出来				
				if(getUsername2 == false){
					//显示空字符异常
					usernameError1.innerHTML = "用户名输入不合法";
				}else{
					//长度限制
					if(getUsername2.length < 6 ||getUsername2.length > 14){
					usernameError1.innerText = "用户名长度必须在[6-14]位之间";
					}else{
					//用户名只能由数字和字母组成
						var regExp = /^[A-Za-z0-9]+$/;
						var ok = regExp.test(getUsername2);
						if(ok){
							
						}else{
							usernameError1.innerText = "用户名只能由数字和字母组成";
						
					}
				}
			}
						
				// usernameError1是onblur时候的
				
			}
			//热点回去
			getUsername.onfocus = function(){
				var usernameError2 = document.getElementById("usernameError");
				//如果后面出现红色字体,则清空前面的内容
				if(usernameError2.innerHTML != "" ){
					getUsername.value = "";		
				}
// 					//处理长度不合法字符
// 					if(getUsername.length < 6 ||getUsername.length > 14){
// 						getUsername.value = "";
// 					}
	
				usernameError2.innerHTML = "";
				// usernameError2是onfocus时候的
			}
			//针对密码的操作
			
			//获取验证密码
			var get2 = document.getElementById("2");
			
			//获取错误提示
			var userpsd3 = document.getElementById("3");
			
			get2.onblur = function(){
				var userpsd2= get2.value;

			//获取密码
				var get1 = document.getElementById("1");
				var  userpsd1= get1.value;
			//验证密码不能为空
				if(userpsd2 == ""){
					userpsd3.innerHTML = "确认密码不能为空";
				}
			//验证密码和密码是否相同
				if(userpsd2 != userpsd1){
			//密码错误
					userpsd3.innerHTML = "确认密码和密码不一致";
				}else{
			//密码正确
				}	
			}
			
			//密码热点回去
			get2.onfocus = function(){
				var userpsd3 = document.getElementById("3");
				if(userpsd3.innerHTML !=""){
				//密码和验证密码不一致
					var get2 = document.getElementById("2");
					get2.value = "";
					userpsd3.innerHTML = "";
				}else{
				//密码和验证密码一致
				}
			}
					
			 //对邮箱进行操作之失焦
			 //获取邮箱span
			var getMbError = document.getElementById("mbError");
			 //获取邮箱
			var getMb = document.getElementById("mb");
// 				var getMb1 = getMb.value.trim();				
			//绑定事件
			getMb.onblur = function(){
				//注意var getMb1 = getMb.value的位置
				var getMb1 = getMb.value;
				//编写正则
				// var regExp =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var regExp1 = /^[A-Za-z0-9]+$/;
				var ok = regExp1.test(getMb1);
				if(ok){
					//邮箱格式正确
					
				}else{
					//邮箱格式错误
					getMbError.innerHTML = "邮箱地址不合法";
				}				
			}	
				
			//对邮箱进行操作之得焦
			getMb.onfocus = function(){
			//判断是否后面报错
				if(getMbError.innerHTML = ""){
					//正确						
				}else{
					//格式错误
					getMbError.innerHTML = "";
// 						getMb.value = "";不能出现				
				}
			}
			
			//鼠标单击事件
			var userbtn = document.getElementById("userbtn");
			userbtn.onclick = function(){
				//代码自动出触发事件
				
				//触发用户名验证
				getUsername.focus();
				getUsername.blur();
				
				//触发验证密码
				get2.focus();
				get2.blur();
				
				//触发邮箱验证
				getMb.focus();					
				getMb.blur();
						
				//进行判断
				if(getMbError.innerHTML == "" && userpsd3.innerHTML == "" && usernameError1.innerHTML==""){
					var idForm = document.getElementById("idForm");
					idForm.submit();
					
				}		
			}		
		}		

	</script>
	<!--使用表单-->
	<form id = "idForm" action="http://loclhost:8080/jd/save" method="get">
		用户名：<input type="txt" name ="用户名" id ="username" /><span id="usernameError"></span><br>
		密码：<input type="txt" name ="密码"  id = "1"/><br>
		确认密码：<input type = "txt" id ="2"/><span id="3"></span><br>
		邮箱：<input type = "txt"  name="邮箱" id= "mb"/><span id="mbError"></span><br>
		<input type="button" value="提交" id="userbtn" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="reset" value="重置" id= "user" />
	</form>	
</body>	
</html>

菊花侠大战桃花怪.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例：表单验证

《JAVA啃骨头》之 Javascript 章节案例：表单验证需求：(1)用户名不能为空(2)用户名必须在6-14位之间(3)用户名只能有数字和字母组成，不能含有其他符号(正则表达)(4)密码和确认密码一致，邮箱地址合法(5)统一失去焦点验证(6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。(7)文本框再次失去焦点后，清空错误提示信息，如果文本框的数据不合法，要求清空文本框的value(8)最终表单中的所有项均合法后可提交源码：表单验证
复制链接

扫一扫