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 回调函数中变量作用域的讨论
Sep 11 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php常用图片处理类
2016/03/16 PHP
php 浮点数比较方法详解
2017/05/05 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
BootStrap中
2016/12/10 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python修改字典键(key)的方法
2019/08/05 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
留学顾问岗位职责
2014/04/14 职场文书
干部鉴定材料
2014/05/18 职场文书
拉歌口号大全
2014/06/13 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
天气温馨提示语
2015/07/14 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
python图像处理 PIL Image操作实例
2022/04/09 Python