Validate笔记一：初识表单验证插件Validate

最新推荐文章于 2023-06-09 13:54:38 发布

Foolish_nick

最新推荐文章于 2023-06-09 13:54:38 发布

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏：锋利的JQuery 前端文章标签：插件表单 jsp jquery

本文链接：https://blog.youkuaiyun.com/qq_20867981/article/details/75226069

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

锋利的JQuery

9 篇文章

订阅专栏

本文介绍了一个基于jQuery的表单验证插件Validate，并提供了详细的使用教程。通过该插件可以轻松实现表单字段的必填校验、电子邮件格式验证等功能。

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

Validate插件是一个表单验证插件。

下载地址:

http://download.youkuaiyun.com/detail/qq_20867981/9897790

在使用时，首先要导入插件:

	<script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.validate.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/messages_zh.js"></script>

然后，确定哪个表单需要被验证:

$("#Form2").validate();

表单HTML：

 <form id="Form2" name="Form2" action="<%=basePath%>mlc/validate1">
      <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
      </p>
      <p>
        <label for="email">EMail</label>
        <input id="email" name="email" class="required email" />
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password" class="required" minlength="5"/>
      </p>
      <p>
        <label for="phone">Phone</label>
        <input id="phone" name="phone" class="required " />
      </p>
 
      <p>
        <input class="submit" type="submit" value="提交"/>
      </p>
 </form>

也可以将表单内的class移出到script中:

	$(function(){
	//console.log('${weekJob.tjzt}');
	$("#Form2").validate({
	     rules:{
	        firstname:{
	           required:true
	        },
	        email:{
	          required:true,
	          email:true
	        },
	        password:{
	          required:true,
	          minlength:5
	        },
	        phone:{
	          required:true
	        }
	     }
	});
	});

 <form id="Form2" name="Form2" action="<%=basePath%>mlc/validate1">
      <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname"  />
      </p>
      <p>
        <label for="email">EMail</label>
        <input id="email" name="email"  />
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password" />
      </p>
      <p>
        <label for="phone">Phone</label>
        <input id="phone" name="phone"  />
      </p>
 
      <p>
        <input class="submit" type="submit" value="提交"/>
      </p>
 </form>

实际效果: