一般我们在做表单验证的时候,更多的是通过js来实现,有的时候表单的字段多了,可能会很麻烦,用Jquery的validate插件,可以很方便的做到表单的验证,这款插件提供了包括判断是否为空,格式是否正确等大概19种验证规则,现在就通过validate插件来验证一下示例表单。
首先准备html页面,代码如下,在引入jquery的同时,还要引入两个js文件,就是validate的插件和国际化的插件,代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<title>Jquery Plugin Test</title>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#">
<fieldset>
<legend>表单验证</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label><em>*</em>
<input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label><em></em>
<input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
初始化的表单如图所示
现在我要加验证代码了,根据jquery提供的插件,我可以这样来写验证脚本,
$(function() {
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment:"required"
} errorElement: "em",
success: function(label) {
label.text(" ")
.addClass("success");
}
});
})
这样写完后,可以出现验证提示,但是提示语言是英文的,这个时候我们就要用到国际化的插件了,可以定义自己想定义的提示方式
需要加上这么一段代码
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
ok,到这一步,就可以了,如果你输入错误的话,会给出带中文的提示。如图
如果输入都正确,则有以下提示
利用这款插件做验证,非常方便。
- 大小: 13.7 KB
- 大小: 22.9 KB
- 大小: 18.4 KB
分享到:
相关推荐
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
jQuery Validate表单验证插件,前端jq验证,jq验证插件
自做的一个简单的表单验证 jquery validate 表单验证 jquery validate 表单验证
jQuery的表单校验插件validate
jQuery Validate插件验证表单小练。
jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js
最新实用的Validate通用表单验证Jquery插件
jquery validate表单验证插件制作注册表单验证提交
Jquery validate和form两个插件,完美进行表单验证和Ajax无刷新方式提交form表单,很有用的哦。
jquery-validate 验证插件
jquery validate表单验证插件手机注册表单验证代码
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
包含Jquery1.6,JqueryUI界面插件,JqueryForm表单异步提交插件,Jqueryvsdoc,VS2008提示插件,JqueryValidate表单验证插件
jquery.validate1.7验证插件最新版!
jquery validate表单验证插件制作会员信息注册表单验
这个前端的jquery的表单校验插件,使用起来很方便,可以大大的减少我们开发者对于表单校验的工作。而且支持自定义验证规则,功能强大。
jquery.validate.js表单验证.pdf
Jquery.validate插件使用方法,基本上能满足注册所用到的表单验证