求表单验证效果分析，高手帮帮小弟我
日期：2014-05-16 浏览次数：20421 次
求表单验证效果分析，高手帮帮我。
这个表单验证是阿里巴巴的，我就想要这样的效果。
阿里巴巴注册页面：http://china.alibaba.com/member/join.htm?tracelog=Reg_TradeToolbar_Index
也可以贵站的注册页面验证效果。
是这样的，当鼠标光标移到输入框里的时候，右边的文字改变颜色；当在输入框里输入文字的时候，鼠标光标移出判断输入的是否合法。如果合法，右边信息改变合法，不合法，右边信息出现红色字体提示。不知道这样的效果怎么实现，请高手帮我写一个类似的示范代码(一个输入框就行)，谢谢。
------解决方案--------------------
仿了一个，抛砖引玉！
L@_@K！
<head>
<title> Check Age </title>
<style type= "text/css ">
#name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
#name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>
</head>
<body>
<table>
<tr>
<td id= "name "> <div class= "text "> 年龄 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "txtAge " /> <div> </td>
<td> <div class= "note " id= "divTipInfo "> 请输入 3-200 之间的数字！ </div> <div class= "noteawoke " id= "divAlarmInfo "> 诚心捣乱吧！哈 </div> </td>
</tr>
</table>
<script type= "text/javascript ">
<!--
// 注：样式表摘抄自 http://style.china.alibaba.com/css/register/ali_register.css
// 部分略作修改
var oAge = document.getElementById( "txtAge ");
var oNote = document.getElementById( "divTipInfo ");
var oAlarm = document.getElementById( "divAlarmInfo ");
oAge.onfocus = function()
{
oNote.className = "notetrue ";
}
oAge.onblur = function()
{
var numAge = parseInt(this.value);
if (isNaN(numAge) || !(numAge> =3 && numAge <=200))
{
oAlarm.style.display = "block ";
oNote.style.display = "none ";
}
else
{
this.value = numAge;
oAlarm.style.display = "none ";
oNote.className = "note ";
oNote.style.display = "block ";
}
}
//-->
</script>
</body>
这个表单验证是阿里巴巴的，我就想要这样的效果。
阿里巴巴注册页面：http://china.alibaba.com/member/join.htm?tracelog=Reg_TradeToolbar_Index
也可以贵站的注册页面验证效果。
是这样的，当鼠标光标移到输入框里的时候，右边的文字改变颜色；当在输入框里输入文字的时候，鼠标光标移出判断输入的是否合法。如果合法，右边信息改变合法，不合法，右边信息出现红色字体提示。不知道这样的效果怎么实现，请高手帮我写一个类似的示范代码(一个输入框就行)，谢谢。
------解决方案--------------------
仿了一个，抛砖引玉！
L@_@K！
<head>
<title> Check Age </title>
<style type= "text/css ">
#name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
#name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>
</head>
<body>
<table>
<tr>
<td id= "name "> <div class= "text "> 年龄 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "txtAge " /> <div> </td>
<td> <div class= "note " id= "divTipInfo "> 请输入 3-200 之间的数字！ </div> <div class= "noteawoke " id= "divAlarmInfo "> 诚心捣乱吧！哈 </div> </td>
</tr>
</table>
<script type= "text/javascript ">
<!--
// 注：样式表摘抄自 http://style.china.alibaba.com/css/register/ali_register.css
// 部分略作修改
var oAge = document.getElementById( "txtAge ");
var oNote = document.getElementById( "divTipInfo ");
var oAlarm = document.getElementById( "divAlarmInfo ");
oAge.onfocus = function()
{
oNote.className = "notetrue ";
}
oAge.onblur = function()
{
var numAge = parseInt(this.value);
if (isNaN(numAge) || !(numAge> =3 && numAge <=200))
{
oAlarm.style.display = "block ";
oNote.style.display = "none ";
}
else
{
this.value = numAge;
oAlarm.style.display = "none ";
oNote.className = "note ";
oNote.style.display = "block ";
}
}
//-->
</script>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
