<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
<script src="jquery.validate.messages_cn.js" type="text/javascript"></script>
<style type="text/css">
.error{
color:red;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
//提交时验证表单
jQuery("#submitButton").click(function(){
if(!validator.form()){
validator.focusInvalid();
return false;
}
jQuery("#form1").submit();
});
//验证规则
var validator = jQuery("#form1").validate({
rules:{
username:{required:true, minlength:2},
email:{required:true, email:true},
url:{url:true, minlength:2},
comment:{required:true}
},
//这里加了一个错误位置,即把错误信息放在<td></td>里面
errorPlacement:function(error,element){
error.appendTo(element.parent("td").next("td"));
}
});
//重置按钮的重置方法
jQuery("#resetButton").click(function(){
jQuery("#form1Table").find(":input[type='text']").attr("value","");
});
});
</script>
</head>
<body >
<h1>一个简单的jQuery验证例子</h1>
<form id="form1" method="get" action="">
<table id="form1Table">
<tr>
<td>
用户名:
</td>
<td >
<input type="text" name="username" size="25"/><font color="red">*</font>
</td>
<td></td>
</tr>
<tr>
<td>
电子邮件:
</td>
<td >
<input type="text" name="email" size="25"/><font color="red">*</font>
</td>
<td></td>
</tr>
<tr>
<td>
网址:
</td>
<td>
<input type="text" name="url" size="25"/>
</td>
<td></td>
</tr>
<tr>
<td>
住址:
</td>
<td>
<input type="text" name="comment" size="25"/><font color="red">*</font>
</td>
<td></td>
</tr>
<tr>
<td>
<input type="button" id="submitButton" value="提交"/>
</td>
<td>
<input type="button" id="resetButton" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到:
相关推荐
jquery表单验证插件
简述jQuery验证插件validation的功能和使用
表单验证类,jquery通用的验证类,jquery验证插件
基于jquery的验证插件,使用方便灵活,不需要提前写提示内容html
2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...
jquery验证插件 带文档 支持中文
囊括11种常见的格式验证形式,如果这些类型还不够,可以方便的传入自定义datype【可以是正则或函数】,实现几乎任何您需要的验证形式。 任何你想要的信息提示效果。tiptype可以传入1、2或函数,传入函数几乎可以...
jquery验证插件Validator
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
JQuery 表单验证,使用JQuery的插件对表单进行动态验证,包括各种格式验证 如email 电话号码
本人制作的jquery表单验证插件JfomValidate 功能:可以完成绝大数页面的脚本验证效果,压缩包里有示例和调用说明。 压缩包包含文件: index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...
jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...
PHP+jquery验证插件示例 PHP+jquery验证插件示例
jQuery表单验证插件EasyValidator 2.0带TIP提示效果
自带丰富示例的jQuery验证表单插件,很常用的代码
基于jQuery的图片点击验证插件,支持与后端交互。
jQuery表单验证插件 jQuery.validity
滑动验证插件-------------------------------------------------------------------------------------------------------------------------------------------------------------------