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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
Html5生成验证码的示例代码
May 10 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python画图学习入门教程
2016/07/01 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
教育专业自荐书范文
2013/12/17 职场文书
开门红主持词
2014/04/02 职场文书
工作简历自我评价
2015/03/11 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers