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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
Python中的自省(反射)详解
2015/06/02 Python
Python AES加密模块用法分析
2017/05/22 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
新闻专业个人求职信
2013/12/19 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
实习指导老师评语
2014/04/26 职场文书
护理医院见习报告
2014/11/03 职场文书
2014年减负工作总结
2014/12/10 职场文书
幼师大班个人总结
2015/02/13 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
围城读书笔记
2015/06/26 职场文书
单位领导婚礼致辞
2015/07/28 职场文书