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 13 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
js表单验证实例讲解
Mar 31 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
浅谈开发eslint规则
Oct 01 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
python中的字典详细介绍
2014/09/18 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python基础教程项目二之画幅好画
2018/04/02 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python pytest进阶之fixture详解
2019/06/27 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Django在Model保存前记录日志实例
2020/05/14 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
运动会广播稿200米
2014/01/27 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
日语系毕业求职信
2014/07/27 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python