使用Jquery-formValidator实现高效表单验证

"jQuery-formValidator是一款基于jQuery的表单验证插件，用于增强网页表单的验证功能，能够满足常见的验证需求，如身份证、整数、正整数、负整数和数字等类型的输入验证。" jQuery-formValidator插件的核心功能在于提供了一种简单而强大的方式来验证用户在表单中输入的数据。它允许开发者自定义验证规则，包括基本的非空验证、长度验证、格式验证等，并能提供友好的错误提示。下面将详细介绍如何使用该插件以及其中涉及的知识点。 1. **初始化配置** 初始化是使用`$.formValidator.initConfig()`方法，参数通常包含表单ID（formID）和错误处理函数（onError）。例如： ```javascript $.formValidator.initConfig({ formID: "form1", onError: function() { alert("校验没有通过，具体错误请看错误提示"); } }); ``` 这里设置了表单ID为"form1"，当验证失败时会弹出错误提示。 2. **字段验证** 对于每个需要验证的表单元素，我们可以使用`.formValidator()`方法，指定验证的事件（如onShow、onfocus、onCorrect）以及验证规则。例如，验证15或18位身份证： ```javascript $("#sfz").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你输入的身份证格式不正确" }); ``` `regexValidator`使用正则表达式进行验证，这里使用了"idcard"作为预定义的身份证正则表达式。 3. **自定义验证函数** 除了使用预定义的正则表达式，还可以定义自定义的验证函数。例如，验证身份证号码： ```javascript $("#sfz1").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).functionValidator({ fun: isCardID }); ``` `functionValidator`接受一个函数参数，这个函数负责执行自定义的验证逻辑。 4. **数据类型验证** 数据类型验证（dataType）用于指定验证数据的类型，例如"enum"用于检查是否匹配给定的正则表达式。其他可能的数据类型还包括"integer"（整数）、"float"（浮点数）、"email"（电子邮件）等。 5. **错误提示** 当验证失败时，可以使用`onError`回调函数定制错误提示信息，提高用户体验。 6. **正则表达式** 在这个例子中，如`regExp:"intege"`，`intege`是一个预定义的正则表达式，用于匹配整数。开发者也可以根据需求编写自己的正则表达式。 7. **验证规则的组合** 一个表单字段可以有多个验证规则，这些规则会被依次执行，直到找到第一个失败的验证。例如，一个字段可以同时验证是否为整数、正整数或负整数。 jQuery-formValidator插件提供了一套完整的表单验证解决方案，通过灵活的配置和扩展，可以适应各种复杂的验证场景，确保用户输入的数据符合预期格式，从而提高表单提交的质量。在实际开发中，可以根据项目需求选择使用预定义的验证规则，或者创建自定义验证规则，以实现更加精细化的表单数据管理。