用JavaScript进行表单验证-白红宇

用JavaScript进行表单验证

阅读量：5079 次

发布时间：2019-06-12

本文共 2181 字，大约阅读时间需要 7 分钟。

用户填写表单后提交，服务器端脚本会先验证数据，保证数据的正确性（比如数据是符合要求的内容、格式正确等）后再将数据交到数据库存储供以后使用。也可以在客户机上用JavaScript进行表单验证，比较快，用户操作效率较高。虽然用JavaScript进行表单验证有很多优点，不过有些用户可能会关闭浏览器JavaScript功能或者不支持JavaScript，因此在服务器端脚本的表单验证必不可少。

研究了《JavaScript基础教程第九版》[美·Dori Smith,Tom Negrino] 一书中对表单进行处理验证的方法，然后结合自己的记忆敲出了以下用于验证表单建立必填字段的代码：

1  2  3  4     建立必填字段 5     
      6     
      7      8  9 10     
     
      11         
      姓名：
12         
      密码：
13         
      确认密码：
14         
       
15     
     
16 17

CSS文件（style.css）:

1 body{
   color:#000;background-color: #fff;}2 input.invalid{
   background-color: #ff9;border:2px red inset;}3 label.invalid{
   color:#f00;font-weight:bold;}

JS(javascript.js)：

1         window.onload = function(){ 2                 document.forms[0].onsubmit = validForm; 3         } 4         function validForm(){ 5             var allGood = true; 6             var allTags = document.forms[0].getElementsByTagName("*"); 7             for(var i=0;i
     
      -1){24                     thisTag.focus();25                     if(thisTag.nodeName=="INPUT"){26                         thisTag.select();27                     }28                     return false;29                 }30                 return true;31             32                 function validBasedOnClass(thisClass){33                     var classBack = "";34                     switch(thisClass){35                         case "":36                         case "invalid":37                             break;38                         case "reqd":39                             if(allGood && thisTag.value == ""){40                                 classBack = "invalid ";41                             }42                             classBack += thisClass;43                             break;44                         default:45                             classBack += thisClass;46                     }47                     return classBack;48                 }49             }50         }

执行结果:

以上只是验证必填字段，这是最基础的。其他的，如根据一个字段对另一字段进行检查（如根据“密码”检查“确认密码”是否相同）、标志有问题字段、根据一个字段设置另一字段（如上面的单选按钮选择其中一个后，下面的复选框只能选择某些选项等）、验证电子邮件格式等。这些都是以验证必填字段的代码为基础的，都将在以后进行补充。

转载于:https://www.cnblogs.com/jettyhuang/p/6336815.html

你可能感兴趣的文章