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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
js中数组的常用方法小结
Dec 30 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
任意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 imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
js继承的实现代码
2010/08/05 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
邻里守望志愿服务活动方案
2014/08/15 职场文书
清明节随笔
2015/08/15 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
mysql 索引合并的使用
2021/08/30 MySQL
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL