jQuery插件Validate实现自定义表单验证


Posted in Javascript onJanuary 18, 2016

 本文实例讲解了jQuery Validate 表单验证插件,如何自定义一个验证方法,分享给大家供大家参考,具体内容如下

效果如下:

验证失败效果:

jQuery插件Validate实现自定义表单验证

验证成功效果:

jQuery插件Validate实现自定义表单验证

具体步骤:

1、引入依赖包

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>

2、添加错误样式和成功样式

em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
 background:url("images/unchecked.gif") no-repeat 0px 0px;
 padding-left: 16px;
}
em.success {
 background:url("images/checked.gif") no-repeat 0px 0px;
 padding-left: 16px;
}

3、自定义一个验证方法

//自定义一个验证方法
 $.validator.addMethod(
 "formula", //验证方法名称
 function(value, element, param) {//验证规则
 return value == eval(param);
 }, 
 '请正确输入数学公式计算后的结果'//验证提示信息
 );

4、调用样式显示

errorElement: "em",  //用来创建错误提示信息标签
 success: function(label) {  //验证成功后的执行的回调函数
  //label指向上面那个错误提示信息标签em
  label.text(" ")  //清空错误提示消息
  .addClass("success"); //加上自定义的success类
 }

5、详细代码如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----自定义一个验证方法</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></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: 1em; vertical-align: top; }
em.error {
 background:url("images/unchecked.gif") no-repeat 0px 0px;
 padding-left: 16px;
}
em.success {
 background:url("images/checked.gif") no-repeat 0px 0px;
 padding-left: 16px;
}



</style>
 <script type="text/javascript">
 $(document).ready(function(){

 //自定义一个验证方法
 $.validator.addMethod(
 "formula", //验证方法名称
 function(value, element, param) {//验证规则
 return value == eval(param);
 }, 
 '请正确输入数学公式计算后的结果'//验证提示信息
 );

 $("#commentForm").validate({
 rules: {
  username: {
  required: true,
  minlength: 2
  },
  email: {
  required: true,
  email: true
  },
  url:"url",
  comment: "required",
  valcode: {
  formula: "7+9" 
  }
 },
 
 messages: {
  username: {
  required: '请输入姓名',
  minlength: '请至少输入两个字符'
  },
  email: {
  required: '请输入电子邮件',
  email: '请检查电子邮件的格式'
  },
  url: '请检查网址的格式',
  comment: '请输入您的评论'
 }, 
 
 errorElement: "em",  //用来创建错误提示信息标签
 success: function(label) {  //验证成功后的执行的回调函数
  //label指向上面那个错误提示信息标签em
  label.text(" ")  //清空错误提示消息
  .addClass("success"); //加上自定义的success类
 }


 });

 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
 <legend>jQuery表单验证插件----自定义一个验证方法</legend>
 <p>
 <label for="cusername">姓名</label>
 <em>*</em><input id="cusername" name="username" size="25" />
 </p>
 <p>
 <label for="cemail">电子邮件</label>
 <em>*</em><input id="cemail" name="email" size="25" />
 </p>
 <p>
 <label for="curl">网址</label>
 <em> </em><input id="curl" name="url" size="25" value="" />
 </p>
 <p>
 <label for="ccomment">你的评论</label>
 <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
 </p>
 <p>
 <label for="cvalcode">验证码</label>
 <input id="cvalcode" name="valcode" size="25" value="" />=7+9
 </p>
 <p>
 <input class="submit" type="submit" value="提交"/>
 </p>
 </fieldset>
 </form>
</body>
</html>

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家学习表单验证有所帮助。

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
javascript 写类方式之一
Jul 05 Javascript
javascript深入理解js闭包
Jul 03 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue生命周期的探索
Apr 03 Javascript
js实现全选和全不选
Jul 28 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 #Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
详解Python中import机制
2020/09/11 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Java servlet面试题
2012/03/04 面试题
教师自我反思材料
2014/02/14 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
个人租房协议书
2014/04/09 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
班主任工作实习计划
2015/01/16 职场文书
企业宣传语大全
2015/07/13 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS