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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
angular动态表单制作
Feb 23 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
javascript 一些用法小结
2009/09/11 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
分享Python字符串关键点
2015/12/13 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python 获取计算机的网卡信息
2021/02/18 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
会计专业个人自我鉴定
2014/03/21 职场文书
学生干部培训方案
2014/06/12 职场文书
专题组织生活会方案
2014/06/15 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
行政助理岗位职责
2015/02/10 职场文书
董事长秘书工作总结
2015/08/14 职场文书