jQuery插件Validation表单验证详解


Posted in jQuery onMay 26, 2018

本文为大家分享了jQuery插件Validation表单验证的具体实现代码,供大家参考,具体内容如下

功能

1.对”姓名“的必填和长度至少是两位的验证。
2.对“电子邮件”的必填和是否为E-mail格式的验证。
3.对“网址”是否为url的验证。
4.对”你的评论“是否必填验证。

结果图

jQuery插件Validation表单验证详解

例子

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>快速上手</title> 
<script type="text/javascript" src="../jquery-1.8/jquery-1.8.0.js"></script> 
<script type="text/javascript" src="../jquery.validate.js"></script> 
<style type="text/css"> 
 *{font-family:Verdana; font-size:96%;} 
 label{width:10em; float:left} 
 label.error{float:none; color:red; padding-left:.5em; vertical-align:top;} 
 p{clear:both} 
 .submit{margin-left:12em;} 
 em{font-weight:bold; padding-right:lem; vertical-align:top;} 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  $("#commentForm").validate(); 
 }); 
</script> 
</head> 
 
<body> 
 <form class="cmxform" id="commentForm" method="get" action="#"> 
  <fieldset><!--fieldset 元素可将表单内的相关元素分组--> 
   <legend>一个简单的验证带验证提示的评论例子</legend><!--legend 元素为 fieldset 元素定义标题--> 
   <p> 
    <label for="cusername">姓名</label><em>*</em> 
    <input id="cusername" name="username" size="25" class="required" minlength="2"/> 
   </p> 
   <p> 
    <label for="cemail">电子邮件</label><em>*</em> 
    <input id="cemail" name="email" size="25" class="required email"/> 
   </p> 
   <p> 
    <label for="curl">网址</label><em> </em> 
    <input id="curl" name="url" size="25" class="url" value=""/> 
   </p> 
   <p> 
    <label for="ccomment">你的评论</label><em>*</em> 
    <textarea id="ccomment" name="comment" cols="22" class="required"></textarea> 
   </p> 
   <p> 
    <input class="submit" type="submit" value="提交"/> 
   </p> 
  </fieldset> 
 </form> 
</body> 
</html>

代码分析

1.jQuery代码

<script type="text/javascript" src="../jquery-1.8/jquery-1.8.0.js"></script> 
<script type="text/javascript" src="../jquery.validate.js"></script> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  $("#commentForm").validate(); 
 }); 
</script>

第1、2行是导入jQuery类库和Validation插件。
第4行的作用是当代码加载完后,执行function中的代码
第5行是确定哪个表单需要被验证。

2.针对不同的字段,进行验证规则编码,设置字段相应属性
class="required" 为必填
class="required email"为必填而且符合为E-mail格式。
class="url" 为url格式验证
minlength="2"为最小长度是2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
PHP查询网站的PR值
2013/10/30 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python 异常处理的实例详解
2017/09/11 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python+opencv实现阈值分割
2018/12/26 Python
解决Python中回文数和质数的问题
2019/11/24 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
离职报告范文
2014/11/04 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
撤诉申请怎么写
2015/05/19 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python