引入jquery.validate.js插件以及Jquery，在最后加上这个插件的方法名来引用。$('form').validate();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery.validate.js的简单用法</title>

</head>

<body>

<form action="">

  <p>用户名：<input class="required" type="text" minlength="3" name="user" />(*)</p>

  <p>电子邮件：<input class="required email" type="text" name="email" />(*)</p>

  <p>网址：<input class="url" type="text" name="url" /></p>

  <p><input type="submit" value="提交" /></p>

</form>

</body>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

    $('form').validate();

  })

</script>

</html>

像以上class中的类名，required是字段不能为空；email是需要符合邮件格式；url是需要符合网址格式（必须带http://），后边minlength是需要输入最少字符,还有挺多参数，详情请看其文档。

二、当然以上是使用的控件方式去验证的，也可以使用JS 对象 键值对传参方式来设置：（上边表单里就不用再写class，直接用name来传值即可）



<form action="">

  <p>用户名：<input name="user" />(*)</p>

  <p>电子邮件：<input type="text" name="email" />(*)</p>

  <p>网址：<input type="text" name="url" /></p>

  <p><input type="submit" value="提交" /></p>

</form>


<script type="text/javascript">

    $(document).ready(function(){

        $('#reg').validate({

            rules:{

                user:{

                    required:true,

                    minlength:2,

                },

                email:{

                    email:true,

                },

                url:{

                    required:true;

                }

            },

            messages:{

                user:{

                    required:'账号不得为空',

                    minlength:'账号不得小于2位',

                },

            },

        });

    })

</script>




结合默认验证规则






此插件下载路径：链接: https://pan.baidu.com/s/1o8wcmkq   密码: grdp


二、如果你用了bootstrap框架，那么你可以用bootstrapValidator表单验证插件，更建议用这个哟~具体请查看：（链接转自）http://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
												


											
jquery.validate.js 表单验证简单用法的更多相关文章
	

    
								
  1. Jquery.validate.js表单验证插件的使用
		
    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
    
		
    2. 
						
  2. jQuery.validate.js表单验证插件
		
    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
    
		
    3. 
						
  3. jquery.validate.js表单验证  jquery.validate.js的用法
		
    jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
    
		
    4. 
						
  4. jquery validate.js表单验证的基本用法入门
		
    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...
    
		
    5. 
						
  5. jquery.validate.js表单验证
		
    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
    
		
    6. 
						
  6. 【转】jquery.validate.js表单验证
		
    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
    
		
    7. 
						
  7. [转]jquery.validate.js表单验证
		
    原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
    
		
    8. 
						
  8. 表单验证代码实例:jquery.validate.js表单验证插件
		
    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
    
		
    9. 
						
  9. 转：jquery validate.js表单验证
		
    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. nil、Nil、NULL、NSNull的区别
			
    nil:指向一个对象的空指针,对objective c id 对象赋空值. Nil:指向一个类的空指针,表示对类进行赋空值. NULL:指向其他类型(如:基本类型.C类型)的空指针, 用于对非对象指针 ...
    
			
    2. 
						
  2. Linux内核分析：dup、dup2的实现
			
    一.首先需要看一下这两个函数的作用: #include <unistd.h> int dup(int oldfd); int dup2(int oldfd, int newfd); 根据m ...
    
			
    3. 
						
  3. java动态代理原理
			
    我们经常会用到Java的动态代理技术, 虽然会使用, 但是自己对其中的原理却不是很了解.比如代理对象是如何产生的, InvocationHandler的invoke方法是如何调用的?今天就来深究下Ja ...
    
			
    4. 
						
  4. 2016年12月30日 星期五 --出埃及记 Exodus 21:25
			
    2016年12月30日 星期五 --出埃及记 Exodus 21:25 burn for burn, wound for wound, bruise for bruise.以烙还烙,以伤还伤,以打还打 ...
    
			
    5. 
						
  5. 使SWT/JFace支持跨平台
			
    由于SWT的实现机制,在不同平台下,必须引用不同swt*.jar. 由于这个瓶颈,我们要为不同的平台编译不同的版本.但是这是可以避免的.这将是本文要讨论的内容. 我一共google到了3种soluti ...
    
			
    6. 
						
  6. 深入了解try catch
			
    @Test public void testWeiXin(){ System.out.println(task()); } private boolean task(){ try { int i =  ...
    
			
    7. 
						
  7. Css绘制圆形，环形，椭圆等图形
			
    转载自http://blog.csdn.net/gongstrong123/article/details/50888758 绘制圆形,环形,椭圆 <!DOCTYPE html> < ...
    
			
    8. 
						
  8. 欧拉回路（hdu3018）
			
    刚学图论不久,看着别人的博客慢慢学了一点基础的,感觉还是有点力不从心,感觉图论的题好多长得都很像,什么太监算法(Tarjan),Kosaraju,当然最基础的还是并查集...好了继续介绍这道题.... ...
    
			
    9. 
						
  9. ASP.NET 状态服务 及 session丢失问题解决方案总结
			
    ASP.NET2.0系统时,在程序中做删除或创建文件操作时,出现session丢失问题.采用了如下方法:1.asp.net Session的实现:asp.net的Session是基于HttpModul ...
    
			
    10. 
						
  10. 解决JS加载速度慢
			
    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...
    
			
    11.