jQuery Validate设置onkeyup验证的实例代码


Posted in Javascript onDecember 09, 2016

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。下面给大家分享一段jquery validate 设置onkeyup验证的代码,具体代码如下所示:

代码如下所示:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="//static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> 
<script src="//static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 
<script src="//static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 
<script> 
$.validator.setDefaults({ 
submitHandler: function() { 
alert("提交事件!"); 
} 
}); 
$().ready(function() { 
$("#commentForm").validate({ 
onkeyup: function(element) { $(element).valid(); } 
}); 
}); 
</script> 
<style> 
.error{ 
color:red; 
} 
</style> 
</head> 
<body> 
<form class="cmxform" id="commentForm" method="get" action=""> 
<fieldset> 
<legend>输入您的名字,邮箱,URL,备注。</legend> 
<p> 
<label for="cname">Name (必需, 最小两个字母)</label> 
<input id="cname" name="name" minlength="2" type="text" required> 
</p> 
<p> 
<label for="cemail">E-Mail (必需)</label> 
<input id="cemail" type="email" name="email" required> 
</p> 
<p> 
<label for="curl">URL (可选)</label> 
<input id="curl" type="url" name="url"> 
</p> 
<p> 
<label for="ccomment">备注 (必需)</label> 
<textarea id="ccomment" name="comment" required></textarea> 
</p> 
<p> 
<input class="submit" type="submit" value="Submit"> 
</p> 
</fieldset> 
</form> 
</body> 
</html>

相关阅读:

以上所述是小编给大家介绍的jQuery Validate设置onkeyup验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
JavaScript高级程序设计
Dec 29 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
javaScript语法总结
Nov 25 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
浅谈React高阶组件
Mar 28 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
任意Json转成无序列表的方法示例
Dec 09 #Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
浅析javascript中的Event事件
Dec 09 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
jquery 笔记 事件
2011/11/02 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
js实现简单扫雷
2020/11/27 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python format 格式化输出方法
2018/07/16 Python
Python和Go语言的区别总结
2019/02/20 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python reques接口测试框架实现代码
2020/07/28 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
竞选班长的演讲稿
2014/04/24 职场文书
自主招生推荐信范文
2014/05/10 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫