jQuery Validate设置onkeyup验证的实例代码

 更新时间:2016年12月09日 11:18:13   投稿:mrr  
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。这篇文章主要介绍了jQuery Validate设置onkeyup验证的相关资料,需要的朋友可以参考下

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异步验证用户名是否存在(推荐)

JQuery validate插件Remote用法大全

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

jquery.validate 自定义验证方法及validate相关参数

以上所述是小编给大家介绍的jQuery Validate设置onkeyup验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jquery xMarquee实现文字水平无缝滚动效果

    jquery xMarquee实现文字水平无缝滚动效果

    这篇文章主要介绍了jquery xMarquee实现文字水平无缝滚动效果,需要的朋友可以参考下
    2014-04-04
  • 基于jQuery的仿flash的广告轮播代码

    基于jQuery的仿flash的广告轮播代码

    很多网站的首页都有广告轮播,今天闲来看了一网站的首页广告轮播方式,是通过 jQuery的blockSlide插件实现的,然后自己测试了一下,很好。
    2010-11-11
  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

    轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)

    这篇文章主要帮助大家轻松学习jQuery插件EasyUI,并且教大家如何利用EasyUI创建树形网络,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery中next()方法用法实例

    jQuery中next()方法用法实例

    这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery中filter()和find()的区别深入了解

    jQuery中filter()和find()的区别深入了解

    一直不是很清楚filter()方法和find()方法的区别,看jQuery Cookbook一书后,终于算是搞清楚了,下面将新的与大家分享下
    2013-09-09
  • jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    这篇文章主要介绍了jquery.uploadify插件在chrome浏览器频繁崩溃解决方法,十分的实用,遇到相同问题,需要解决的朋友可以参考下
    2015-03-03
  • jQuery实现开关灯效果

    jQuery实现开关灯效果

    这篇文章主要为大家详细介绍了jQuery实现开关灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • jQuery Validation实例代码 让验证变得如此容易

    jQuery Validation实例代码 让验证变得如此容易

    众所周知,Jquery以其简洁性让无数人为之疯狂。现在我要像大家介绍一个jQuery Validation,一看到Validation大家肯定第一直观感觉就是这肯定是一个验证框架,没有错,本文就是基于jQuery Validation展开讨论。
    2010-10-10
  • jquery解析JSON数据示例代码

    jquery解析JSON数据示例代码

    作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式
    2014-03-03
  • jQuery选择器全集详解

    jQuery选择器全集详解

    本文结合图文代码,基本上将所有的jQuery选择器都讲解了一遍,非常的详尽,希望对大家能有所帮助。
    2014-11-11

最新评论