本文是根据jquery官方的实例做的相应的修改,做这个实例的目的就是当以后项目中遇到表单验证的时候就可以依照本文所写的实例做相应的修改,本文如果有什么不当的地方,麻烦请批评指出,谢谢!
1.先建一个测试页面,必须包括表单:
导入相应的资源文件:
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
2.新建规则及设置样式:
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// 当提交的时候,判断表单内容
$("#testForm").validate();
$("#signupForm").validate({
rules: {
firstname : "required",
lastname : "required",
username : {
required : true,
minlength: 5,
maxlength: 10
},
email: {
required: true,
email: true
},
password : {
required : true,
minlength: 5
},
confirm_password : {
required : true,
minlength: 5,
equalTo : "#password"
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree : "required"
},
messages: {
firstname : {
required : "姓不能为空!",
},
lastname : {
required : "名不能为空!"
},
username : {
required : "用户名不能为空,且必须在5到10个字符之内!",
minlength: "用户不能小于5个字符",
maxlength: "用户名不能大于10个字符"
},
password : {
required : "请提供一个密码",
minlength : "密码至少为5个字符以上!"
},
confirm_password : {
required : "确认密码不能为空!",
minlength: "确认密码也至少为5个字符以上!",
equalTo : "两次输入的密码不匹配!"
},
email : "请提供个合法的邮箱地址!",
agree : "请选择是/否同意"
}
});
//隐藏主题选项,当主题没有被选中时
var newsletter = $("#newsletter");
// 一开始是隐藏选项的
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// 显示主题选项,当主题被选中时
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
#testForm { width: 500px; }
#testForm label { width: 250px; }
#testForm label.error, #testForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
3.创建两个表单:
<form class="cmxform" id="testForm" method="post" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">用户名(*)</label>
<input id="cname" name="name" class="required" minlength="2" />
<p>
<label for="cemail">邮箱(*)</label>
<input id="cemail" name="email" class="required email" />
</p>
<p>
<label for="ccomment">评论(*)</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
4.下载相应的资源文件:见附件。
分享到:
相关推荐
jquery.validate表单验证框架详解.
jquery表单验证框架:jquery.validate.zip 附:中文API 文档
2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...
jQuery validate 验证 个性化验证
jquery.validate_ValidationjQuery表单验证框架
Quick Validation 是一个 jQuery 的表单验证框架。你可以定制错误信息: errorRequired errorMaxlengtn errorMinlength errorNumber errorInteger errorRange errorEmail errorPhone errorExpression ...
需要jQuery支持,使用时引入就好,教程的话可以看这个http://www.runoob.com/jquery/jquery-plugin-validate.html
jquery-validate验证框架使用详解及JS文件
完整的web开发框架,开发环境需要的jdk和eclipse需要自己搭建,框架包含简单的例子,可查询数据和增加数据。
很好用的页面验证框架,对页面表单数据验证及提示很方便!
。
。
好用的jquery表单验证框架,里面有demo,包括:登录验证、注册验证、tab等各种类型表单的验证,是否有适合你的一款???
jquery-validate 可对前端form进行表单校验,文档里详细介绍了如何使用jquery-validate框架和如何扩展验证方法。
这个jQuery插件使简单的客户端的表单验证轻松快速,同时提供大量的选择定制。是一个很好的选择,当你试图把它集成到一个现有的应用程序的现有标记。插件捆绑了一套有用的验证方法,包括URL和电子邮件验证
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。有兴趣的可以了解一下。
JQuery 表单验证 框架,非常好用的东西