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模块化和命名空间管理的问题说明
Dec 06 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
详细分析React 表单与事件
Jul 08 Javascript
Vue详细的入门笔记
May 10 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生成随机密码的几种方法
2011/01/17 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
分页栏的web标准实现
2011/11/01 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
js new Date()实例测试
2019/10/31 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python difflib模块示例讲解
2017/09/13 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
个人自我剖析材料
2014/02/07 职场文书
2015教师节通讯稿
2015/07/20 职场文书
《司马光》教学反思
2016/02/22 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫