Jquery学习笔记五通过validate插件来验证表单

最新推荐文章于 2022-07-07 09:15:17 发布

zhangwanfly

最新推荐文章于 2022-07-07 09:15:17 发布

阅读量140

点赞数

分类专栏： JavaScript技术文章标签： jQuery 脚本 HTML ViewUI

JavaScript技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用jQuery Validate插件简化表单验证过程。通过具体示例展示了如何配置验证规则，如必填项、最小长度及电子邮件格式等，并通过国际化插件实现了中文提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们在做表单验证的时候，更多的是通过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>

初始化的表单如图所示

[img]http://dl.iteye.com/upload/attachment/285703/11195d9d-5640-38fd-aa17-1ba6b9c1ced4.jpg[/img]
现在我要加验证代码了，根据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，到这一步，就可以了，如果你输入错误的话，会给出带中文的提示。如图

[img]http://dl.iteye.com/upload/attachment/285707/0a67acc2-c024-3632-861c-7303bde61a7b.jpg[/img]
如果输入都正确，则有以下提示

[img]http://dl.iteye.com/upload/attachment/285710/ee277157-1e9b-3c51-bc72-5c919f1ccb9e.jpg[/img]
利用这款插件做验证，非常方便。