前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧

表单验证的高级特性

本次介绍的重点如下：

动态改变样式属性

className属性的用法

遮罩层特效的

制作动态输入的提示特性

• 实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色
•  使用元素的style属性访问样式规则

  • object.style.property;
    

• 例如:

  • 访问字体的颜色color使用obj.style.color

  • 访问字体的大小属性使用obj.style.fontSize

  • font-size变换成fontSize

    样式属性由多个单词组成时，须变换属性的书写格式

例1：onFocus获得焦点事件，onBlur失去焦点事件

	
		
		
		
	
	
	
		用户名:
		密码:
	

className属性的用法

• className属性可以动态引用样式的类选择器

• 语法：

  object.className= "className";
  

• 在使用className属性须预先定义相应的类选择器（如定义文本框获得焦点和失去焦点的样式），然后再使用object.className在事件触发时引用相关样式的类选择符

例1完善：在函数中设置在文本框获得和失去焦点的类样式

	
		
		
		
	
	
	
		用户名:
		密码:
	
	

例3：可以在函数中直接访问样式属性

	
		
		
	
	
		用户名:
		密码:
	
	

制作登录时的遮罩层

例：

	
		
		
		
	
	
		
		
这里可以放置背景网页
		
		
  
		

		用户名：

		密码:

		
		
	
	

• 实现步骤一：
  • 页面中添加两个层标签（div）,分别用作遮罩层和弹出层，设置两层的样式属性，遮罩层为半透明状，其z-index属性的值小于弹出层的z-index属性的值（z-index的值不做具体要求，但是谁的z-index值越大，谁出现在最上层）
• 实现步骤二：
  •  编写初始化遮罩层和弹出层的大小及位置的脚本
  • 用到的属性：
    • scrollWidth：是对象的实际内容的宽，不包括边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
    • clientWidth：是对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
    • offsetWidth：是对象的可见宽度，包括滚动条等边线，会随窗口的显示大小改变
  • 实现步骤三：
    • 在页面加载事件onload中调用init方法,在登录链接中显示遮罩层，并处理弹出层的关闭操作
• !important的用法

  • IE和mozilla在解析部分CSS样式属性时有所不同。利用!important可以针对IE和非IE浏览器设置不同的样式
  • !important 在非IE浏览器中能识别，而IE中则忽略使用!important 的css语法

附加内容：基于遮罩层实现省市级联的另一种思路（基于display属性）

	
		
		
		
		
		
		
		
			请输入城市：请选择希望的城市
			

			

			 关闭
			 
				--请选择省份--
			 	河南
			 	河北
			 
			 

			

				郑州市        洛阳市

		        焦作市        新乡市

		        鹤壁市        安阳市

		        濮阳市        开封市

		        商丘市        许昌市

		        漯河市        平顶山市

		        南阳市        信阳市

		        济源市        周口市

		        驻马店市    三门峡市

				    
			
			

				石家庄市        廊坊市

			    唐山市        衡水市

			    秦皇岛市        张家口市

			    承德市        保定市

			    沧州市    邢台市 

			    邯郸市        

				    
			
			
			
			
		
		


	

 总结

• 通过JavaScript脚本可以动态改变样式属性的值，语法如下：object.style.property;
• 使用className属性可以动态改变页面元素上应用的类选择器
• 样式属性display的作用是设置页面元素的显示方式，其值包括：none、inline、block
• 以上主要讲解如何实现遮罩层实现表单登录功能的案例，至于表单如何验证，可以参照正则表达式的规则，自定义验证表单内容