案例:表单验证

《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>
<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的前端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页