位置: 编程技术 - 正文
详解jQuery的表单验证插件--Validation(jquery form表单)
编辑：rootadmin推荐整理分享详解jQuery的表单验证插件--Validation(jquery form表单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery.table,jquery中的表单选择器,jq 表单,jq 表单,jquery操作表格,jquery给表单赋值,jq 表单,jquery 表单,内容如对您有帮助，希望把文章链接给更多的朋友！
大致介绍
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 种语言。该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 年 jQuery 早期的时候就已经开始出现，并一直更新至今。访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
下载地址： Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件
文件引入完毕，先写个简单的表单
然后我们开始写验证表单的代码
首先我们需要知道那个表单需要验证
然后开始写验证的规则，要注意这里选择元素是根据每个标签的name属性选择的，基本语法如下
从上面可以看出，如果一个信息只有一个验证要求可以写成一行，比如 firstname；如果有多个验证要写成像 lastname 这种形式；知道了基本的语法
在看看Validation都提供了那些校验规则
我们将上面的表单验证完善一下，如下
效果：
可以看到，这里的提示默认是英文的不太满意，将提示信息更改成中文有两种方式
第一种方式：引入语言文件（推荐）
<script type="text/javascript" src="dist/localization/messages_zh.js"></script>
他的提示信息是：
第二种方式：自己写提示信息
效果：
注意：还有一种写验证的方式是在 class 中写，例如
<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">
但是不推荐这种写法，因为不符合样式与结构分离的要求，并且还需要自己下载一个jquery.metadata.js文件才能够这样写
表单提交问题
可以在表单提交之前执行我们自定义的代码，当我们的自定义代码执行完毕后再提交表单
可以设置validate的默认值
只验证不提交表单
错误提示信息设置
1、错误信息位置设置
errorPlacement方法是设置错误信息显示在哪，默认值是在验证元素的后面
errorClass 是设置错误信息的样式，后跟css类名
errorElement 是设置用什么标签包住错误信息，默认值是<label>
errorLabelContainer 是设置将所有的错误信息包在一个地方
wrapper 是设置用什么标签再把上边的 errorELement 包起来
例如：
是将错误提示信息显示在验证的信息前面
效果：
例如：
是将每个提示信息用<span>标签包起来，给他们添加css名为 .commentError 的样式， 并把他们都包再一个class为 error 的div里，在用<li>把每个提示信息包起来
效果：
2、错误信息样式设置
有两种方式可以修改提示信息的样式
第一种就是采用下载Validation时自带的样式文件
<link href="demo/css/screen.css" type="text/css" rel="stylesheet" />
第二种方式就是自己定义样式（当然也可以修改自带的css文件）
例如添加这样的样式：
效果：
验证时的问题
1、验证的元素通过
验证的元素通过验证时如果要进行操作，可以使用 success ，他可以接受字符串或者是函数，当接受的是字符串的时候是添加样式
例如：
是在要验证的元素通过验证时，弹出1
例如：
success: "valid"
是将css样式名为 .valid 添加到元素上
2、验证方式
自定义校验
虽然Validation提供了许多验证的方式，但是有些情况还是不够用的，所以如果要添加自定义的校验方式可以使用 addMethod 方法，通常将自定义的方法写在 additional-methods.js 中，然后要引入这个文件
<script type="text/javascript" src="dist/additional-methods.js"></script>
写入 additional-methods.js 文件的内容
例如：
只要把这段代码写入 additional-methods.js 文件就可以使用了
例如：
效果：
radio 和 checkbox、select 的验证
radio的required表示必须选中一个
checkbox的required表示必须选中，minlength表示必须选中的最小个数，maxlength表示必须选中的最大个数，rangelength[2,3]表示选中个数区间
select的required表示选中的value不能为空，minlength表示必须选中的最小个数，maxlength表示必须选中的最大个数，rangelength[2,3]表示选中个数区间
总结：Validation插件提供了许多的验证，用户可以自己添加自己的验证和提示信息的样式，但是在博客中我并没有提及与ajax相关的内容，因为ajax还没有学习-_-||，如果有什么问题可以和我探讨，如果有不对的地方，欢迎指正
标签: jquery form表单
本文链接地址:https://www.jiuchutong.com/biancheng/373958.html 转载请保留说明！