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 相关文章推荐
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
js实现通过开始结束控制的计时器
Feb 25 Javascript
实例分析javascript中的异步
Jun 02 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
杏林同学录(一)
2006/10/09 PHP
php URL编码解码函数代码
2009/03/10 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python中的pack和unpack的使用
2018/03/12 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python pygame实现球球大作战
2019/11/25 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python em算法的实现
2020/10/03 Python
介绍一下linux的文件权限
2014/07/20 面试题
应届毕业生应聘自荐信范文
2014/02/26 职场文书
法律六进活动方案
2014/03/13 职场文书
一年级小学生评语
2014/04/22 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL