详解jquery validate实现表单验证 （正则表达式）

一、前言

在构建交互式网页应用时，表单验证是不可或缺的一环。为了实现快速、便捷的用户数据验证和反馈，我们采用了jQuery的validate插件。

二、jQuery validate插件简介

validate插件的核心方法是validate()，它定义了一系列基本的校验规则以及有用的配置项。通过rule设置表单的验证规则，通过messages设置表单不符合验证规则的提示信息。还有一个方便的debug参数，如果设置为true，则表单仅进行检查而不进行提交，便于调试。

三、校验规则详解

1. required:必填字段，用户必须输入信息。

2. minlength和maxlength：分别用于设置输入的最小和最大长度。

3. rangelength：定义输入长度的范围，如[2，10]，表示输入长度需在2到10位之间。

4. remote：通过Ajax进行远程验证。可配置url、type以及发送的数据。例如：当需要进行某种数据校验时，可以发送一个GET请求到服务器端进行验证。

5. 还有一些其他的校验规则，如email、url、date、dateISO、number、digits、creditcard等，分别用于验证电子邮件地址、、日期、数字等。

6. equalTo："field"，输入值必须和指定的字段相同。

7. aept：输入拥有合法后缀名的字符串（主要用于文件上传）。

8. maxlength和minlength：分别用于设置输入字符串的最大和最小长度。汉字在计算长度时算作一个字符。

9. range和rangelength：用于验证输入值或字符串长度是否在某个范围内。

10. max和min：用于验证输入值是否在某个特定范围内。

四、实际应用示例

以远程验证为例，假设我们有一个名为“icode”的输入框，我们需要对它进行远程验证：

```css

check: {

required: true,

remote: {

url: "__CONTROLLER__/check?check=" + $("icode").val(), //__CONTROLLER__表示当前控制器

type: 'GET' //默认为GET请求，也可以设置为POST请求

}

}

```

以上示例中，当用户在“icode”输入框中输入内容后，会发送一个GET请求到指定的url进行验证。根据返回的结果，用户可以得知输入是否正确。如果不正确，页面会给出相应的提示信息。通过这种方式，我们可以确保用户输入的数据是合法且有效的。jQuery的validate插件为我们提供了一种简单而高效的方式来验证用户填写的表单数据。通过使用正则表达式和远程验证等功能，我们可以确保数据的准确性和完整性，从而提供更好的用户体验。表单验证专家——validator对象

在网页开发中，表单验证是不可或缺的一环。这时，validator对象就派上了用场。它具备多种功能，帮助你轻松验证表单及表单元素的有效性。

1. 表单验证利器：validator对象

validator对象为你提供了强大的表单验证功能。其中，validator.form()函数用于验证整个表单是否有效，返回结果可能是true或false。一旦表单验证失败，你可以通过这个函数迅速得知问题所在。

validator.element(element)函数则专注于表单中的某个元素。它可以判断特定元素是否满足验证要求，同样返回true或false。这让你能更精确地定位问题所在。

如果你希望将表单恢复到验证前的状态，可以使用validator.resetForm()函数来实现这一点。validator.showErrors(error)函数能够帮助你针对特定元素显示错误信息，提升用户体验。至于表单中无效的元素数量，validator.numberOfInvalids()函数会告诉你答案。

2. 静态方法：扩展与定制

除了上述实例方法外，validator对象还具备一些强大的静态方法。其中，jQuery.validator.addMethod()允许你增加自定义的验证方法，使得表单验证更加灵活多样。你可以通过这个方法定义自己的验证规则，满足特定的业务需求。

格式化字符串的需求则可以通过jQuery.validator.format()方法来实现。它能够帮助你用参数替换模板中的占位符，让提示信息更加人性化。如果你想调整插件的默认设置，可以使用jQuery.validator.setDefaults()方法。通过jQuery.validator.addClassRules()，你可以为带有特定名称的class添加组合验证类型，提高验证效率。

总结：

当我们在网页上创建一个表单时，为了确保用户输入的数据符合特定的规则，我们需要为表单元素添加验证规则。这种验证可以通过JavaScript和正则表达式来实现。例如，我们可以为带有class="txt"的类添加两个验证规则：必填项和长度范围（2-10个字符）。

获取表单元素的验证规则非常简单。例如，通过`$("username").rules()`，我们可以获取到与用户名相关的所有验证规则。我们还可以为表单元素添加或删除验证规则。使用`$("username").rules('add', rules)`可以添加新的验证规则，而`$("username").rules('remove', rules)`则可以删除已存在的验证规则。

接下来，让我们看看一些常用的正则表达式验证规则。用户名的验证可以包含汉字，其正则表达式为 /^[\w\u4e00-\u9fa5]{2,10}/g。如果不含汉字，只允许英文字母、数字和下画线，则可以使用/^\w{2,10}$/进行验证。还有QQ号、、密码、手机号和URL的验证规则。

在文档加载完成后，我们可以使用jQuery的validate插件对表单进行验证。例如，在一个管理员注册表单中，我们可以对管理员名称、名称、密码、确认密码、、QQ号和等字段进行验证。这些验证规则确保了用户输入的数据符合我们的要求，提高了数据的质量和安全性。

还有一些自定义的验证规则，如checkName、checkPwd、checkEmail和checkQQ等。这些规则可以根据具体的需求进行定制，以满足特定的业务逻辑。

使用`cambrian.render('body')`可以渲染表单的验证状态或结果。这样，用户可以清楚地看到哪些字段未通过验证，从而进行修正。

表单验证是确保数据准确性和完整性的重要手段。通过合理使用JavaScript、正则表达式和jQuery的validate插件，我们可以轻松地实现强大的表单验证功能，提高用户体验和数据安全性。