客户端表单验证_关于客户端表单验证的另一篇文章

最新推荐文章于 2024-11-01 14:48:20 发布

dingshi7798

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量141

点赞数

文章标签： java html javascript python js ViewUI

原文链接：https://www.sitepoint.com/client-side-form-validation/

版权

客户端表单验证

使用JavaScript进行客户端验证并不是什么新鲜事，对吧？ 但是可以使用HTML DOM并使用专用属性扩展输入字段。 继续阅读！

我假设您已经阅读了很多有关表单验证的文章，包括客户端和服务器端，但是这篇文章在主题上有新的变化。我将在这里展示的是如何将一些面向对象的程序集成到表单验证中。那么有什么收获呢？本技巧适用于支持JavaScript和W3CHTML DOM的浏览器，例如Internet Explorer 6，Netscape 6和Opera 6，以及某种程度上较早的版本。尽管我尚未测试Konqueror，但根据规格它应该能正常工作。

合理的警告：您需要相对精通JavaScript，才能遵循本文。

标签和对象

每个表单都有许多输入标签，这些输入标签通常具有名称和值属性。文本框也可能具有size和maxsize。在本文中，我添加了一些通常不会找到的属性： pattern和errorMsg 。这些属性是非标准的，但不会干扰浏览器。对于在那里的面向对象编程爱好者来说，这些属性的作用类似于类的成员，在这种情况下，类是输入标签。

普通输入标签：

<input type="text" name="firstname" size="20" maxsize="20" />

修改后的输入标签：

<input type="text" name="firstname" size="20" maxsize="20"

 pattern="[^A-Za-z]+" errorMsg="Invalid charcter found in firstname" />

Java中的等效类：

public class Input {

 String type = "text"; 

 String name = "firstname"; 

 String size = "20"; 

 String maxsize = "20";  

 String pattern = "[^A-Za-z]+"; 

 String errorMsg = "Invalid character found in firstname"; 

}

通常，您需要为要验证的每个输入字段编写函数。但是，使每个输入标签都“知道”其匹配模式和错误消息，会使验证代码的编写更加容易。实际上，可以在这种设置中使用可用于任何可以用正则表达式（简称RegExps）描述的值的通用解决方案。有关正则表达式的链接，请参见本文结尾处的资源。

DOM（文档对象模型）

大多数属性在DHTML中表示为对象，但这些添加的属性则不。因此，要获取值，我们需要使用DOM（有关DOM上的链接，请参阅最后的资源列表）。与DHTML中一样，完整HTML页面称为document 。该文档可用的一种方法是getElementsByTagName(String) 。此方法用于查找所有输入标签：

var elements = document.getElementsByTagName('input');

如果elements将是普通JavaScript对象，则可能会猜到它将是一个包含所有输入标签的数组。但不是在DOM中：这是一个NodeList 。与myarray[i]到达元素的数组不同， NodeList拥有一个items集合（例如elements.item(i) ）。

然后，我们可以使用普通的for循环遍历所有元素：

for (var i = 0; i < elements.length; i++) {

但是现在是时候使用pattern属性了：

var pattern = elements.item(i).getAttribute('pattern');

我们需要获取此输入字段的模式才能对其进行验证。在本文中，仅强制性元素具有模式属性（验证总是通过RegExps完成）。

因此，我们从输入字段中获取值，并检查是否有任何字符与模式不匹配。换句话说，我们搜索有问题的字符。

var value = elements.item(i).value;

  var offendingChar = value.match(pattern);

并且，如果发现任何非法值，则会为用户生成一条错误消息：

str += elements.item(i).getAttribute('errorMsg') + "n" +

         "Found this illegal value: '" + offendingChar + "' n";

为了给用户一些额外的帮助，让我们更改包含无效输入的字段的背景颜色（请注意，这在Opera中不起作用，但也没有任何危害）。

elements.item(i).style.background ="red";

正如细心的读者可能已经注意到的那样， elements.item[i].value value表示为一个对象。但是elements.item(i).getAttribute('value')是否可以达到？不，它只是在标签中显示默认值（如果有），而不是用户输入的值。

辅助功能

我还没有提到两个小功能。首先，我们需要确保浏览器可以处理脚本：

function DOMCheck() {

  if(!document.getElementsByTagName('html')) {  

    alert("Sorry! Your browser does not support the W3C HTML DOM!");  

  }  

}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

这只是检查是否存在html元素。请注意，如果省略<html>标记，Internet Explorer仍将页面呈现为HTML，但是脚本的返回值将为零，从而给出错误的错误消息。因此，始终保持良好状态，并在文档中包含<html>标记。

其次，当用户在输入标签中输入新值时，我们需要清除背景色：

function changeColor(th) {

  //'resets' the background-color to white  

  th.style.background = "white";  

}

请注意，这在Opera中不起作用。使用事件处理程序'onfocus'从输入标签中调用此方法。

来源清单

我们的验证功能的完整清单如下所示：

function validate() {

  var str = "";  

  var elements = document.getElementsByTagName('input');  

  

  // loop through all input elements in form  

  for(var i = 0; i < elements.length; i++) {  

  

    // check if element is mandatory; ie has a pattern   

    var pattern = elements.item(i).getAttribute('pattern');  

    if (pattern != null) {  

      var value = elements.item(i).value;  

  

      // validate the value of this element, using its defined pattern  

      var offendingChar = value.match(pattern);  

  

      // if an invalid character is found or the element was left emtpy  

      if(offendingChar != null || value.length == 0) {  

  

        // add up all error messages  

        str += elements.item(i).getAttribute('errorMsg') + "n" +  

               "Found this illegal value: '" + offendingChar + "' n";  

  

        // notify user by changing background color, in this case to red  

        elements.item(i).style.background = "red";   

      }  

    }  

  }   

  

  if (str != "") {  

    // do not submit the form  

    alert("ERROR ALERT!!n" +str);   

    return false;  

  } else {  

    // form values are valid; submit  

    return true;  

  }  

}

进一步扩展

添加属性的想法可以通过诸如最小值和最大值之类的属性进一步扩展。假设RegExp还不够，我们需要进一步限定给定值：

Age: <input type="text" name="age" maxlength="2" size="2"

      min_reqs="18" max_reqs="30" errorMsg="Age must be 18-30 years" />

仍然使用相同的想法，通用验证代码可通过为该输入元素添加一些逻辑（在验证功能内）而用于使用最小/最大值的所有输入标签。

var min_reqs = elements.item(i).getAttribute('min_reqs');

  var max_reqs = elements.item(i).getAttribute('max_reqs');  

  

  if (min_reqs != null && max_reqs != null) {  

    var value = elements.item(i).value;  

    if (value < min_reqs || value > max_reqs) {  

      str += elements.item(i).getAttribute('errorMsg') + 'n';  

    }  

  }