软件学堂

网游分类软件分类

JS编写表单验证样式

2012-11-09 来源:网络

【实例名称】

JS编写表单验证样式

【实例描述】

实现表单验证的样式有很多,本例将使用一种类似AjaX效果的验证方法实现一个分数(数值型)的验证。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>   <title>Check Score-学无忧(www.xue51.com)</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="txtScore" /><div></td>         <td><div class="note" id="divTipInfo"> 请输入 0-100 之间的数字!</div> <div class="noteawoke" id="divAlarmInfo"> 数据输入错误,重新输入!</div></td>     </tr>  </table> <script type="text/javascript"> var oScore = document.getElementById("txtScore");    //获取输入文本框 var oNote = document.getElementById("divTipInfo");   //获取提示信息框 var oAlarm = document.getElementById("divAlarmInfo"); //获取警告信息框 oScore.onfocus = function() {     oNote.className = "notetrue"; //获取焦点时改变样式 } oScore.onblur = function()     //失去焦点时的方法 {     if (this.value != "")     {         var score = parseInt(this.value);   //转换数值类型         //判断输入内容是否符合条件         if (isNaN(score) || !(score>=0 && score<=100))         {             oAlarm.style.display = "block";             oNote.style.display = "none";         }         else         {             this.value = score;             oAlarm.style.display = "none";             oNote.className = "note";             oNote.style.display = "block";         }     }     else     {       //用户没有输入的情况下         oAlarm.style.display = "none";         oNote.className = "note";         oNote.style.display = "block";     } }   </script>  </body> </html>

【运行效果】

 表单验证样式运行效果

【难点剖析】

本例的重点是输入框的两个事件:“onfocus”和“onblur”。当输入框获得焦点时,改变提示框的样式,如果用户输入错误则显示警告信息框,隐藏提示框。本例中CSS样式表起到了很大的作用。

【源码下载】

为了JS代码的准确性,请点击:JS编写表单验证样式 进行本实例源码下载 

上一篇:JS判断方法是否已经定义
下一篇:JS判断表单是否已修改

相关文章