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插入动态样式实现代码
Feb 22 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
js实现图片无缝循环轮播
Oct 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中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
使用正则替换变量
2007/05/05 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
JS实现div居中示例
2014/04/17 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
python调用fortran模块
2016/04/08 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python异常处理知识点总结
2019/02/18 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
爱心捐款倡议书
2014/04/14 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
教师年度考核个人总结
2015/02/12 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
检讨书范文
2019/04/16 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang