自定义javascript验证框架示例【附源码下载】

本文将带您深入了解如何构建自定义的 JavaScript 验证框架，通过实例和源码分享，让您轻松掌握 JavaScript 正则验证技巧。如果您对前端开发感兴趣，特别是希望了解表单验证的实现方式，那么本文将是您不可多得的学习资源。

传统的 jQuery 验证框架虽然功能强大，但在使用时却可能显得复杂繁琐，代码不够简洁。我们有了创建一个自定义 jQuery 验证框架的想法。这个框架的主要原理是通过对 input、select 和 textarea 这三类表单控件进行校验，通过定义自定义属性来实现各种验证规则。

我们的验证框架支持国际化，可以通过识别 cookies 中的语言信息，加载相应的 JS 语言包。这样，无论您的用户来自哪个国家，都能以他们熟悉的语言进行表单验证，提升用户体验。

在开发过程中，我们采用了 JavaScript 的正则表达式进行验证。正则表达式是一种强大的文本处理工具，能高效地处理字符串，实现各种复杂的验证需求。

本文不仅提供了详细的理论讲解，还附带了源码供读者下载参考。通过阅读源码，您可以更深入地理解验证框架的实现细节，甚至可以根据自己的需求进行扩展。这对于个人开发者来说，既是一种学习，也是一种实践。

这个自定义的 JavaScript 验证框架简洁易用，功能强大，适合个人开发和小型项目。如果您希望了解更多的表单验证技巧，或者想为自己的项目构建一个类似的验证框架，那么本文将是您绝佳的学习资源。为了测试验证框架，静态HTML页面足够使用，但为了实际应用，我搭建了一个简单的动态web工程。以下是源代码的下载链接（此处留空，待提供下载链接）。

该验证框架主要基于jQuery的异步对象进行扩展，采用jquery defered的用法。这种验证方式的好处是，即使某些验证采用ajax方式进行，结合jquery的when函数，也能实现批量校验。核心代码如下：

function Validator(errorHandle){

这是一个验证器的构造函数，用于创建验证器对象。其中errorHandle是错误处理函数，用于处理验证失败的情况。

Validator.prototype中定义了验证器的各种方法和规则。

addRules方法用于添加验证规则，参数包括规则名称、验证函数和错误处理函数。这些方法基于jQuery的Deferred对象实现异步验证，并结合jquery的when函数实现批量校验。

validateDiv方法用于对一个div元素进行验证，它会遍历div中的所有元素，对每个元素进行验证，并使用jquery的Deferred和when函数实现异步处理和批量校验。

validateItem方法用于对单个元素进行验证，它会根据元素的属性获取验证规则，并使用validate方法进行验证。

validate方法是根据规则对元素进行验证的方法，它会调用对应的验证函数，并根据结果执行相应的操作。

validationByRegx方法是一个用于正则验证的方法，它会根据正则表达式对元素的值进行验证。

showErrorMessage方法是默认的出错处理方法，它会在元素旁边显示错误信息。

对于HTML页面的验证方式，采用在元素上添加自定义属性（如required、maxLen、url、email等）的方式进行验证。在页面中添加一个div元素，包含多个需要验证的输入元素，以及一个验证按钮。点击验证按钮，会调用validatorDiv函数进行验证。

关于HTML5冲突与JS国际化的细节

在这个项目中，我们遇到了HTML5与某些元素之间的冲突问题。这种冲突并非不可调和的矛盾，而是可以通过合理的定义和规划来解决的。我们还需要注意同步修改validation.js文件以及处理i18n国际化文件。为了确保项目的顺利进行，我自定义了一套错误信息处理机制。当存在带有msgid属性的元素时，系统将寻找与之对应的国际化消息；若无msgid，则系统会寻找带有“rule_”前缀并结合自定义属性的消息。这一机制旨在更好地满足项目需求。

接下来，让我们深入JavaScript的国际化支持功能。我们定义了一个名为JSLocale的对象，其中包含了各种错误提示信息。例如，“msg_required”表示“不能为空”，“msg_maxLen”意味着“最大长度{{:length}}”，以此类推。我们还定义了一个“myUrlError”的自定义错误提示，用于指示不合法。

为了测试这些功能的效果，我们提供了完整的实例代码供您参考。只需点击相应链接即可获取。

值得一提的是，我们还为大家推荐两款实用的正则表达式工具。一款是JavaScript正则表达式在线测试工具，另一款是正则表达式在线生成工具。这些工具将为您在JavaScript正则表达式方面提供极大的帮助。

我们还准备了多个关于JavaScript的专题供读者学习，如《JavaScript入门教程》、《JavaScript进阶技巧》、《JavaScript实战案例》等。我们希望这些内容能对您的JavaScript程序设计有所帮助。