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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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容器类的两种实现方式示例
2019/07/24 PHP
prototype class详解
2006/09/07 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery map方法使用示例
2014/04/23 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
外国人聘用意向书
2014/04/01 职场文书
实习生评语
2014/04/26 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
应届生求职信范文
2014/06/30 职场文书
学期个人自我总结
2015/02/13 职场文书
中学生学习保证书
2015/02/26 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB