前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧
表单验证的高级特性
本次介绍的重点如下：
动态改变样式属性
className属性的用法
遮罩层特效的
制作动态输入的提示特性
- 实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色
- 使用元素的style属性访问样式规则
-
object.style.property;
-
-
例如:
-
访问字体的颜色color使用obj.style.color
-
访问字体的大小属性使用obj.style.fontSize
-
font-size变换成fontSize
样式属性由多个单词组成时，须变换属性的书写格式
-
例1：onFocus获得焦点事件，onBlur失去焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.fStyle{
border:2px solid red;
background:#FFFF99;
}
.bStyle{
border:1px solid blue;
background:#fff;
color:#CCCCCC;
}
</style>
</head>
<body>
用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()" onblur="blurStyle()"/>
密码:<input name="password" type="password" id="password" />
</body>
</html>
className属性的用法
-
className属性可以动态引用样式的类选择器
-
语法：
object.className= "className"; -
在使用className属性须预先定义相应的类选择器（如定义文本框获得焦点和失去焦点的样式），然后再使用object.className在事件触发时引用相关样式的类选择符
例1完善：在函数中设置在文本框获得和失去焦点的类样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.fStyle{
border:2px solid red;
background:#FFFF99;
}
.bStyle{
border:1px solid blue;
background:#fff;
color:#CCCCCC;
}
</style>
</head>
<body>
用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()" onblur="blurStyle()"/>
密码:<input name="password" type="password" id="password" />
</body>
<script type="text/javascript">
function $(objName){
return document.getElementById(objName);
}
function focusStyle(){
$("username").className="fStyle";
if($("username").value=="请输入用户名"){
$("username").value="";
}
}
function blurStyle(){
$("username").className="bStyle";
if($("username").value==""){
$("username").value="请输入用户名";
}
}
</script>
</html>
例3：可以在函数中直接访问样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
用户名:<input name="username" type="text" class="bStyle" id="username" onFocus="focusStyle()" onblur="blurStyle()"/>
密码:<input name="password" type="password" id="password" />
</body>
<script type="text/javascript">
function $(objName){
return document.getElementById(objName);
}
function focusStyle(){
$("username").style.border="2px solid red";
$("username").style.backgroundColor="#FFFF99";
if($("username").value=="请输入用户名"){
$("username").value="";
}
}
function blurStyle(){
$("username").style.border="1px solid blue";
$("username").style.backgroundColor="#fff";
if($("username").value==""){
$("username").value="请输入用户名";
}
}
</script>
</html>
制作登录时的遮罩层
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 去除所有标签的内外边距 */
*{
margin: 0px;
padding: 0px;
}
/* 设置body的宽高，目的是为了可以滚动 */
body{
width: 2000px;
height: 1200px;
}
#cover{
/* 默认不显示 */
display: none;
background-color: #CCCCCC;
/* 绝对定位 */
position: absolute;
top: 0px;
left: 0px;
/* 设置不透明度 ,不同浏览器的实现方式可能不同*/
filter: alpha(opacity=50);
opacity: 0.5 !important;
}
#logindiv{
width: 300px;
height: 200px;
margin-left: 500px;
background-color: white;
position: relative;
display: none;
/* 上层显示，值越大，层越在上面 */
z-index: 10;
}
</style>
</head>
<body onload="init()">
<!-- 可以自行设置页面效果 -->
<h2>这里可以放置背景网页</h2>
<input type="button" id="login" value="登录" onclick="show()" />
<div id="cover"></div> <!-- 遮罩层 -->
<div id="logindiv">
用户名：<input type="text" id="username" placeholder="请输入用户名" /><br />
密码:<input type="text" id="password" placeholder="请输入密码"/><br />
<input type="submit" value="提交" onclick="yincang()" />
</div>
</body>
<script>
function $(obj){
return document.getElementById(obj);
}
function init() {
/* 获得遮罩层 */
var cover = $("cover");
// 设置滚动鼠标时自动增加遮罩层宽高
cover.style.width = document.documentElement.scrollWidth + "px";
cover.style.height = document.documentElement.scrollHeight + "px";
}
function show() {
// 块状显示
$("cover").style.display = "block";
$("logindiv").style.display = "block";
}
function yincang(){
//提交表单后，再次隐藏遮罩层和登录界面
$("cover").style.display = "none";
$("logindiv").style.display = "none";
}
</script>
</html>- 实现步骤一：
- 页面中添加两个层标签（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属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#cover{
background:#CCCCCC;
top:0;left:0;
position:absolute;
filter:alpha(opacity=60);
opacity:0.6 !important;
z-index:2;
}
#citydiv{
border:1px solid #993333;
background:#FFFFFF;
width:300px;
height:250px;
display:none;
margin-left:100px;
position:relative;
z-index:10;
}
#closer{
font-size:11px;
position:absolute;
margin-left:231px;
}
</style>
</head>
<script>
function $(obj){
return document.getElementById(obj);
}
function init(){
var cover=$("cover");
cover.style.width=document.documentElement.scrollWidth+"px";
cover.style.height=document.documentElement.scrollHeight+"px";
cover.style.display="none";
}
// 显示遮罩层和城市列表
function show(){
$("cover").style.display="block";
$("citydiv").style.display="block";
$("hn").style.display="none";
$("hb").style.display="none";
}
//隐藏遮罩层
function hide(){
$("cover").style.display="none";
$("citydiv").style.display="none";
$("hn").style.display="none";
$("hb").style.display="none";
}
//将选择的城市添加到文本框
function subs(){
var arr=document.getElementsByName("city");
var str="";
// $("position").value=" ";
for(i=0;i<arr.length;i++){
if(arr[i].checked){
str+=arr[i].value+",";
}
}
str=str.substr(0,str.length-1);
$("position").value=str;
hide();
}
function zicity(){
var province=$("province").value;
if(province==""){
cancel();
$("hb").style.display="none";
$("hn").style.display="none";
}else{
if(province=="hn"){
cancel();
$("hn").style.display="block";
$("hb").style.display="none"
}else{
cancel();
$("hb").style.display="block";
$("hn").style.display="none";
}
}
}
function cancel(){
var arr=document.getElementsByName("city");
for(i=0;i<arr.length;i++){
if(arr[i].checked){
arr[i].checked=false;
}
}
}
function defaultBtn(){
var province=$("province").value;
cancel();
if(province=="hn"){
$("hn1").checked=true;
}else{
$("hb1").checked=true;
}
}
</script>
<body onload="init()">
请输入城市：<input type="text" id="position" /><a href="javascript:void(0)" onclick="show()">请选择希望的城市</a>
<div id="cover"></div>
<div id="citydiv">
<a href="javascript:void(0)" id="closer" onclick="hide()">关闭</a>
<select id="province" onchange="zicity()" >
<option value="">--请选择省份--</option>
<option value="hn">河南</option>
<option value="hb">河北</option>
</select>
<br />
<div id="hn" >
<input id="hn1" type="checkbox" name="city" value="郑州市">郑州市 <input type="checkbox" name="city" value="洛阳市">洛阳市<br />
<input type="checkbox" name="city" value="焦作市">焦作市 <input type="checkbox" name="city" value="新乡市">新乡市<br />
<input type="checkbox" name="city" value="鹤壁市">鹤壁市 <input type="checkbox" name="city" value="安阳市">安阳市<br />
<input type="checkbox" name="city" value="濮阳市">濮阳市 <input type="checkbox" name="city" value="开封市">开封市<br />
<input type="checkbox" name="city" value="商丘市">商丘市 <input type="checkbox" name="city" value="许昌市">许昌市<br />
<input type="checkbox" name="city" value="漯河市">漯河市 <input type="checkbox" name="city" value="平顶山市">平顶山市<br />
<input type="checkbox" name="city" value="南阳市">南阳市 <input type="checkbox" name="city" value="信阳市">信阳市<br />
<input type="checkbox" name="city" value="济源市">济源市 <input type="checkbox" name="city" value="周口市">周口市<br />
<input type="checkbox" name="city" value="驻马店市">驻马店市 <input type="checkbox" name="city" value="三门峡市">三门峡市<br />
<input type="button" value="提交" onclick="subs()" /> <input type="button" value="取消" onclick="cancel()" /> <input type="button" value="默认" onclick="defaultBtn()" />
</div>
<div id="hb" >
<input id="hb1" type="checkbox" name="city" value="石家庄市">石家庄市 <input type="checkbox" name="city" value="廊坊市">廊坊市<br />
<input type="checkbox" name="city" value="唐山市">唐山市 <input type="checkbox" name="city" value="衡水市">衡水市<br />
<input type="checkbox" name="city" value="秦皇岛市">秦皇岛市 <input type="checkbox" name="city" value="张家口市">张家口市<br />
<input type="checkbox" name="city" value="承德市">承德市 <input type="checkbox" name="city" value="保定市">保定市<br />
<input type="checkbox" name="city" value="沧州市">沧州市 <input type="checkbox" name="city" value="邢台市">邢台市 <br />
<input type="checkbox" name="city" value="邯郸市">邯郸市 <br />
<input type="button" value="提交" onclick="subs()" /> <input type="button" value="取消" onclick="cancel()" /> <input type="button" value="默认" onclick="defaultBtn()" />
</div>
</div>
</body>
</html>
总结
- 通过JavaScript脚本可以动态改变样式属性的值，语法如下：object.style.property;
- 使用className属性可以动态改变页面元素上应用的类选择器
- 样式属性display的作用是设置页面元素的显示方式，其值包括：none、inline、block
- 以上主要讲解如何实现遮罩层实现表单登录功能的案例，至于表单如何验证，可以参照正则表达式的规则，自定义验证表单内容