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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 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程序?
2006/12/08 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript 不只是脚本
2007/05/30 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
教研活动总结
2014/04/28 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
计划生育工作总结2015
2015/04/03 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python