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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js加强的经典分页实例
Mar 15 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
JavaScript常用工具函数大全
May 06 Javascript
React更新渲染原理深入分析
Dec 24 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
JavaScript 乱码问题
2009/08/06 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python短信轰炸的代码
2020/03/25 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
护士求职自荐信范文
2014/03/19 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
失职检讨书大全
2015/01/26 职场文书
大学四年个人总结
2015/03/03 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python