JavaScript之表单验证的高级特效

  • 内容
  • 评论
  • 相关

javascript 通常会被用到在数据被送往服务器前对 HTML 表单中所输入的数据进行验证,以验证它的正确性无误再被传送到服务器。

JavaScript之表单验证的高级特效

下面有已经做好的表单,再次基础上可以参考。

制作即时提示错误的特效

那么如何制作即时提示错误的特效呢?如下图

JavaScript之表单验证的高级特效

使用DIV层的内容动态改变。在每个输入框后添加一个DIV层, 根据用户的输入, 动态显示错误信息

JavaScript之表单验证的高级特效

DIV层display属性简介

style是样式 display 是样式中的显示 none和block都是显示中的参数 none 为不显示 block为显示;

block : CSS1 块对象的默认值。用该值为对象之后添加新行;

none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间;

inline : CSS1 内联对象的默认值。用该值将从对象中删除行。

演示实现步骤

1、在登录文本框后插入DIV标签loginError (即没有样式的DIV层)

JavaScript之表单验证的高级特效

2.修改源代码,设置DIV的显示方式为inline,即和文本框在同一行的

div id=loginError style=display:inline

/div

3、添加文本框失去焦点的事件函数

function checkLogin( ){

var myDiv=document.getElementById(loginError);//获取插入的div对象;

myDiv.innerHTML=;

var strName=document.userfrm.loginName.value;

if (strName.length == 0)

{

myDiv.innerHTML=font color='red'用户名不能为空/font;

return;

};

}

……

INPUT name=loginName type=text onblur=checkLogin( )

//如果输入的信息不合法,则利用DIV的innerHTML或innerText进行错误提示,innerText只能写文本信息

JavaScript之表单验证的高级特效

版权声明:若无特殊注明,本文皆为《与阳》原创,转载请保留文章出处。

本文链接:JavaScript之表单验证的高级特效 - http://scoen.com/?post=20

本文标签:

JavaScript之表单验证的高级特效