jQuery插件确认快速完成表单验证的方式

JQuery的确认插件可以到http://plugins.jquery.com/上去下载。今天来分享一下，关于这个插件的使用。

简易使用

这第一种方式可谓是傻瓜式的使用，我们只需要按照确认定义好的规则就可以了。•首先引入JQuery库和确认插件：脚本类型=' text/JAVAScript ' src=' http : jquery-2。2 .4 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : jquery。验证。量滴js /脚本然后是打开验证开关：

$(function(){ $(“# form _ id”)).validate()；});//或者$(文档)。ready(function(){ $('#form_id ')).validate()；});验证的内置验证规则有：class=" required " :表明表单中该字段为必选的类='必需的电子邮件'表明在表单中该字段为必须存在的，而且是符合电子邮件的规范格式class=' url '表明在表单中该字段需要满足全球资源定位器(统一资源定位符)的匹配模式最小长度='6 '表明在表单中该字段的长度最小为6位

案例展示：

！DOCTYPE html html head meta charset=' utf-8 '表单演示的标题验证/标题脚本类型=' text/JAVAScript ' src=' http : jquery-2。2 .4 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。验证。量滴js '/脚本样式em { font-weight : bold；垂直对齐： 顶部；颜色：红色；向右浮动：}标签{ width:10empadding: 7px }。容器{ width : 370 px h8 : auto背景-颜色：银色；}/style/head body div align=' center ' class=' container ' form id=' vform ' method=' post ' action=' # 字段集图例使用JQuery插件确认来实现表单验证=用户名的/图例p标签姓名：/label input id=' username ' name=' username ' class=' required ' min length=' 2 ' em */em/p p label for=' email '邮件：/标签输入id='email' name='email' class='必需的给他们发邮件*/em /p p标签为='url '网址：/标签输入id=' URL ' name=' URL ' class=' URL '/p p标签为=' comment '评论：/label text area id=' comment ' name=' comment ' class=' required '/text area em */em/p pinput type=' submit ' name=' submit '/p/field set/form/div script/$(function(){/$(' # vform ')).验证(); //});$(文档)。ready(function(){ $('#vform ')).validate()；});/脚本/正文/html验证规则全写到班级中

和简易使用不同的是，这种方式使用纯的的班级来进行控制。但是我们需要引入一个新的插件jquery.metadate.js。实现的功能就是帮助用户将所有的与验证数据相关的信息写到班级属性中，方便管理。

我们可以通过以下几步来实现这一需求。•引入一个新的插件jquery。元数据。jsscript src=' http : jquery。元数据。js '/脚本改变调用验证表单的开关：

$(function(){ $(“# form _ id”)).validate()；//去掉这行代码，修改成下面的$('#form_id ').validate({ meta : ' validate ' })；});•将验证信息写到班级属性中。详见下面的代码。

div align=' center ' class=' container ' form id=' vform ' method=' post ' action=' # '字段集图例使用JQuery插件确认来实现表单验证=用户名的/图例p标签姓名：/标签输入id=' username ' name=' username ' class=' { validate : }必选： true，min length : 2 } } em */em/p p标签为='电子邮件'邮件：/label input id=' email ' name=' email ' class=' { validate : }必填项：真实，电子邮件：真实} }=' URL '的em */em/p p标签网址：/label input id=' URL ' name=' URL ' class=' { validate : { URL : true } } '/p p label for=' comment '评论：/label文本区域id=' comment ' name=' comment ' class=' { validate : { required : true } } '/文本区域em */em/p pinput type=' submit ' name=' submit '/p/字段集/表单/div注意：验证写在班级属性的时候，记得要将验证规则使用空格分隔开来。否则代码不会正常的运行！

还有就是$('#vform ').validate({ meta : ' validate ' })；中生效这个单词不能随意的更改，否则也是不会生效的。

通过名称属性构建验证规则

下面描述一种验证编写方法，该方法与HTML元素的属性没有直接关系，而是通过名称属性与字段和验证规则相关。

优点：可以实现行为和结构的分离，进而调试和维护代码；表单代码，删除所有类验证。当然，这并不是说我们不能给字段添加样式。

div align=' center ' class=' container ' form id=' vform ' method=' post ' action=' # ' field set Legend使用JQuery插件验证实现表单验证/Legend P label for=' username ' name:/labe input id=' username ' Em */Em/P label for=' email ' mail:/labe input id=' email ' name=' email ' email ' name=' email ' Em */Em/P label for=' URL ' URL:/labe input id=' URL ' name=' URL '/P label

script//$(function(){//$(' # vform '))。验证()；//});$(function(){ $('#vform '))。validate({ rule s : { username : { required d : true，minlength: 6 }，email: { required: true，email: true }，url: 'url '，comment : ' required ' })；});/script注意：用空格分隔验证字段

以上是JQuery插件Validation的基本用法。

国际化的中国文化首先介绍了一个中文信息验证库，我们可以在下载验证的lib包下找到。script src=' http : messages _ zh . js '/script第二步是在验证规则处添加消息字段，然后输入用户自定义的中文信息。如下所示：

script//$(function(){//$(' # vform '))。验证()；//});$ (function () {$ ('# vform '))。验证({ rules : { username 3360 { required : True，minlength : 6，messages : {required 3360 '请输入您的姓名'，minlength : '请输入至少6个字符' }})、email3360 {required: True，email3360 True，messages : { required 3360 '请输入您的邮箱'，email3360 '请检查您的邮箱格式！'}}，URL : {URL :为真，消息： {URL : '，请检查URL的格式！'}}，comment: {required: true，messages: {required3360 '请输入注释！', } } } });});/剧本我不知道怎么回事。这段代码我没有显示中文提示。你发现错误在哪里了吗？

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。