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 相关文章推荐
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
javascript 数组操作详解
Jan 29 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
Angularjs过滤器使用详解
May 25 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue.js用法详解
Nov 13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php实现的双向队列类实例
2014/09/24 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
js实现上传图片之上传前预览图片
2013/03/25 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
深入理解python try异常处理机制
2016/06/01 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Django实现表单验证
2018/09/08 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python requests模块cookie实例解析
2020/04/14 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python selenium xpath定位操作
2020/09/01 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
公司营业员的自我评价
2014/03/04 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
军事博物馆观后感
2015/06/05 职场文书
开学典礼校长致辞
2015/07/29 职场文书
创业计划书之餐饮
2019/09/02 职场文书