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 相关文章推荐
JQuery写动态树示例代码
Jul 31 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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实现批量压缩图片文件大小的脚本
2014/07/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
Python os库常用操作代码汇总
2020/11/03 Python
Python实现异步IO的示例
2020/11/05 Python
Python join()函数原理及使用方法
2020/11/14 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
护士求职自荐信范文
2014/03/19 职场文书
唐山大地震观后感
2015/06/05 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
一级电子管军用接收机测评
2022/04/05 无线电
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技