当前位置：首页 > 资讯 > 技术文档

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

时间：2022-12-18 14:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：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>

[b]相关阅读：[/b] [url=http://www.1sucai.cn/article/99574.htm]利用jQuery.Validate异步验证用户名是否存在（推荐）[/url] [url=http://www.1sucai.cn/article/84220.htm]JQuery validate插件Remote用法大全[/url] [url=http://www.1sucai.cn/article/78231.htm]jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法[/url] [url=http://www.1sucai.cn/article/78226.htm]jquery.validate 自定义验证方法及validate相关参数[/url] 以上所述是小编给大家介绍的jQuery Validate设置onkeyup验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：在ASP.NET 2.0中操作数据之三十：格式化DataList和Repeater的数据
下一篇：jQuery模拟实现天猫购物车动画效果实例代码

资讯排行榜
更多>>