1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  7.     <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
  8.     <script type="text/javascript">
  9.     $().ready(function() {
  10.         var validate= $("#signupForm").validate({
  11.                 rules: {
  12.                    firstname: "required",
  13.                    email: {
  14.                     required: true,
  15.                     email: true
  16.                    },
  17.                    password: {
  18.                     required: true,
  19.                     minlength: 5
  20.                    },
  21.                    confirm_password: {
  22.                     required: true,
  23.                     minlength: 5,
  24.                     equalTo: "#password"
  25.                    }
  26.                 },
  27.                 messages: {
  28.                    firstname: "请输入姓名",
  29.                    email: {
  30.                     required: "请输入Email地址",
  31.                     email: "请输入正确的email地址"
  32.                    },
  33.                    password: {
  34.                     required: "请输入密码",
  35.                     minlength: "密码不能小于{0}个字 符"
  36.                    },
  37.                        confirm_password: {
  38.                     required: "确认密码",
  39.                     minlength: "确认密码不能小于5个字符",
  40.                     equalTo: "两次输入密码不一致不一致"
  41.                 }
  42.             },
  43.             //把错误信息放到一处处理与 errorPlacement 函数连用
  44.             groups:{
  45.                 login:"firstname email password confirm_password"
  46.             },
  47.             errorPlacement:function(error,element){
  48.                 error.insertBefore("#error_info");
  49.             },
  50.             //提交表单后焦点在第一个错误表单内
  51.             focusInvalid:true,
  52.             //指定错误提示的css类名
  53.             errorClass:"error_info",
  54.             //指定验证通过的css类名
  55.             validClass:"success_info",
  56.             //验证通过提交表单
  57.             submitHandler:function(form){
  58.                 console.info("提交表单"+$(form).serialize());
  59.             },
  60.             invalidHandler:function(event,validator){
  61.                 console.info("表单错误"+validate.numberOfInvalids());
  62.             },
  63.             // 取消某个元素的校验
  64.             ignore:"#firstname",
  65.             onfocusout:function(){
  66.                 return false;
  67.             }
  68.         });
  69.         $("#check").click(function(){
  70.             var flag1=$("#signupForm").valid();//检查表单是否有效
  71.             var flag2=$("#firstname").rules();//查询元素的校验规则
  72.             var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
  73.             var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
  74.             var flag5=validate.form();//验证表单是否有效
  75.             var flag6=validate.element("#firstname");//验证表单某个元素是否有效
  76.             validate.resetForm();//恢复表单原来的状态
  77.             var flag7=validate.numberOfInvalids();//获得错误元素个数
  78.             console.info(flag7);
  79.         });
  80.         //针对某个元素显示特定的提示信息
  81.         validate.showErrors({
  82.             firstname:"ERROR"
  83.         });
  84. });
  85.     </script>
  86. </head>
  87. <body>
  88.     <form id="signupForm" method="get" action="">
  89.         <p id="error_info">
  90.             <label for="firstname">Firstname</label>
  91.             <input id="firstname" name="firstname" />
  92.         </p>
  93.         <p>
  94.             <label for="email">E-Mail</label>
  95.             <input id="email" name="email" />
  96.         </p>
  97.         <p>
  98.             <label for="password">Password</label>
  99.             <input id="password" name="password" type="password" />
  100.         </p>
  101.         <p>
  102.             <label for="confirm_password">确认密码</label>
  103.             <input id="confirm_password" name="confirm_password" type="password" />
  104.         </p>
  105.         <p>
  106.             <input class="submit" type="submit" value="Submit"/>
  107.         </p>
  108.         <p>
  109.             <input class="c" type="button" value="检查表单是否有效" id="check"/>
  110.         </p>
  111. </form>
  112. </body>
  113. </html>

jquery.validate 基础的更多相关文章

  1. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  2. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  3. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  6. 【JQ成长笔记】jQuery Validate验证插件

    validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...

  7. MVC的验证 jquery.validate.unobtrusive

    jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...

  8. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  9. Jquery Validate结合QTip实现绚丽的表单验证

    相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...

随机推荐

  1. Java 下的 JSON库性能比较：JSON.simple

    JSON已经成为当前服务器与WEB应用之间数据传输的公认标准,不过正如许多我们所习以为常的事情一样,你会觉得这是理所当然的便不再深入思考了.我们很少会去想用到的这些JSON库到底有什么不同,但事实上它 ...

  2. oracle 小题

    create table student(sno varchar2(10) primary key,sname varchar2(20),sage number(2),ssex varchar2(5) ...

  3. 关于L'Hopital法则

    1.首先需要使用 罗尔定理 函数f(x)在闭区间[a,b]连续在开区间(a,b)可微,如果f(a)=f(b),那么至少存在一点c使函数导数f'(c)=0 注意需要再(a,b)可微,如果函数有角点,断点 ...

  4. 如何使用NodeJs来监听文件变化

    1.前言 在我们调试修改代码的时候,每修改一次代码,哪怕只是很小的修改,我们都需要手动重新build文件,然后再运行代码,看修改的效果,这样的效率特别低,对于开发者来说简直不能忍. 2.构建自动编译工 ...

  5. linux下的5个查找命令

    在Linux中,有很多方法可以做到这一点.国外网站LinuxHaxor总结了五条命令,你可以看看自己知道几条.大多数程序员,可能经常使用其中的2到3条,对这5条命令都很熟悉的人应该是不多的. 1. f ...

  6. 用户 'IIS APPPOOL\ASP.NET V4.0' 登录失败 解决办法…………

    在iis管理器中-->应用程序池-->ASP.NET V4.0---->高级设置-->标识-->改为localSystem

  7. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

  8. 一款免费支持PDF、word、excel、PPT、jpeg之间互转线上软件

    偶然发现的一款免费支持PDF.word.excel.PPT.jpeg之间互转,支持合并pdf.加密解密PDF的线上软件,首先声明,不是广告党,我自己试用过,确实是目前我用过最好用的,如果有朋友有更好的 ...

  9. armv6, armv7, armv7s的区别

    ARM是微处理器行业的一家知名企业,arm处理器以体积小和高性能的优势在嵌入式设备中广泛使用,几乎所有手机都是使用它的. armv6, armv7, armv7s是ARM CPU的不同指令集,原则上是 ...

  10. Windows XP和Word 2007不能正常使用VSTO插件

    今天帮助同事解决了一个小问题,就是在WindowsXP上,为Word2007开发的插件不能正常显示. 通过搜索关键词 WindowsXp Word 2007 VSTO找到了两个解决方案. http:/ ...