jQuery插件确认表单验证详解

本文为大家分享了框架插件确认表单验证的具体实现代码，供大家参考，具体内容如下

功能

1.对"姓名"的必填和长度至少是两位的验证。2.对"电子邮件"的必填和是否为电子邮件格式的验证。3.对"网址"是否为全球资源定位器(统一资源定位符)的验证。4.对"你的评论"是否必填验证。

结果图

例子

超文本标记语言头元http-equiv='内容-类型' Content=' text/html；charset=utf-8'/title快速上手/title脚本类型=' text/JavaScript ' src=' http :/jquery-1.8/jquery-1。8 .0 .js/'脚本脚本类型=' text/JavaScript ' src=' http :/jquery。验证。js /脚本样式类型=' text/CSS ' * { font-family : verdana；字号：96%；}标签{ width:10emfloat:left}标签，错误{ float:nonecolor:red左填充left:5em垂直对齐：顶；} p{clear:both} .提交{左边距：12 em} em { font-weight : bold；填充-右侧： lem垂直对齐：顶；}/样式脚本类型='text/javascript' $(文档)。ready(function(){ $(' # comment form ')).validate()；});/script/head body form class=' cmx form ' id=' comment form ' method=' get ' action=' # '字段集！-字段集元素可将表单内的相关元素分组传说一个简单的验证带验证提示的评论例子/传奇！传说元素为表单分组元素定义标题- p标签为='cusername '姓名/labelem */em input id=' cuser name ' name=' username ' size=' 25 ' class=' required ' min length=' 2 '/p p label for=' cemail '电子邮件/label em */em input id=' cemail ' name=' email ' size=' 25 ' class='必需的=curl的电子邮件/p/p标签网址/labelem/em输入id=' curl ' name=' URL ' size=25 ' class=' URL '值=' '/p p标签为=' ccomment '你的评论/labelem */em文本区域id=' c comment ' name=' comment ' cols=' 22 ' class=' required '/文本区域/p p输入class=' submit ' type=' submit ' value='提交//p /fieldset /form /body /html代码分析

1.jQuery代码

脚本类型=' text/JavaScript ' src=' http :/jquery-1.8/jquery-1。8 .0 .js/'脚本脚本类型=' text/JavaScript ' src=' http :/jquery。验证。js/'脚本脚本类型='text/javascript' $(文档)。ready(function(){ $(' # comment form ')).validate()；});/script第1、2行是导入框架类库和确认插件。第四行的作用是当代码加载完后，执行功能中的代码第5行是确定哪个表单需要被验证。

2.针对不同的字段，进行验证规则编码，设置字段相应属性类='必需'为必填类='必需的电子邮件'为必填而且符合为电子邮件格式class='url '为全球资源定位器(统一资源定位符)格式验证minlength='2 '为最小长度是2

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