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模板技术
Apr 27 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
vue视图不更新情况详解
May 16 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
JS 创建对象的模式实例小结
Apr 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实时显示输出
2008/10/02 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python流程控制语句的深入讲解
2020/06/15 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
人事经理岗位职责
2014/04/28 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
宇宙与人观后感
2015/06/05 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技