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

  • 更新时间:2022-12-07 14:17:20
  • 编辑:禄珺琪

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实现锚点scoll效果的具体方法

    这篇文章主要介绍了jQuery实现锚点scoll效果,实例分析了锚点scoll效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    发布时间:2019-08-03

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

    jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持,通过本文给大家介绍jquery.

    发布时间:2020-02-16

  • 深入理解jQuery.trim() 函数及trim()用法

    jQuery.trim()函数用于去除字符串两端的空白字符。jquery trim函数应用非常广泛,下面小编给大家讲解jquery.trim()函数及trim()用法详解,需要的朋友可以参考下

    发布时间:2020-03-10

  • jQuery Bar Indicator 插件实现进度条实例代码

    这篇文章主要介绍了基于jQuery Bar Indicator 插件实现进度条展示效果的相关资料,需要的朋友可以参考下

    发布时间:2020-02-13

  • 全面解析jQuery无冲突模式

    在本篇文章里小编给大家分享了关于jQuery无冲突模式知识点分析内容,需要的朋友们可以学习下。

    发布时间:2020-01-19

  • jQuery WebUploader文件上传实例浅析

    这篇文章主要为大家详细介绍了jQuery插件WebUploader实现文件上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-02-02

  • jQuery动态添加.active实现导航效果实例

    这篇文章主要介绍了jQuery动态添加.active 实现导航效果代码思路详解,需要的朋友可以参考下

    发布时间:2021-05-17

用户留言