提到表单验证的插件，第一个想到的就是jquery.validate.js，所以小生想在这里稍微详细地说一下这款插件的具体使用方法，便于理解，我直接附上整段demo的代码（没怎么调样式，主要是看js）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>JQuery表单验证插件jQuery.validate.js</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .myform{
  12.             width:800px;
  13.             margin:30px auto;
  14.         }
  15.         .myform legend{
  16.             margin-left:30px;
  17.         }
  18.         p{
  19.             margin:30px;
  20.         }
  21.         .side{
  22.             text-align: center
  23.         }
  24.         em.success{
  25.             color:green;
  26.         }
  27.         em.error{
  28.             color:red;
  29.         }
  30.         /*还可以引入validation.css样式表，可以增加图标显示*/
  31.     </style>
  32. </head>
  33. <body>
  34.     <form class="myform" id="myForm" method="get" action="">
  35.         <fieldset>
  36.             <legend>注册账号</legend>  
  37.  
  38.             <p>
  39.                 <label for="username">用户名</label>
  40.                 <input type="text" id="username" name="username"/>
  41.             </p>  
  42.  
  43.             <p>
  44.                 <label for="password">密码</label>
  45.                 <input type="password" id="password" name="password" value="" />
  46.             </p>  
  47.  
  48.             <p>
  49.                 <label for="confirm_password">确认密码</label>
  50.                 <input type="password" id="confirm_password" name="confirm_password" value="" />
  51.             </p> 
  52.  
  53.             <p>
  54.                 <label for="email">邮箱</label>
  55.                 <input id="email" name="email" class="required" />
  56.             </p>
  57.  
  58.             <p>
  59.                 <label for="tel">手机号码</label>
  60.                 <input id="tel" name="tel"/>
  61.             </p>  
  62.  
  63.             <p>
  64.                 <label for="url">项目链接</label>
  65.                 <input id="url" name="url" class="url"/>
  66.             </p>  
  67.  
  68.             <p>
  69.                 <label for="code">验证码</label>
  70.                 <input id="code" name="code" class="num"/>
  71.             </p>              
  72.  
  73.             <p>
  74.                 <label for="sex">性别</label>
  75.                 <select id="sex" name="sex">
  76.                     <option value="0">男</option>
  77.                     <option value="1" class="woman">女</option>
  78.                 </select>
  79.             </p> 
  80.  
  81.             <p>
  82.                 <label for="">是否已婚</label>
  83.                 <label><input type="radio" value="0" name="married">是</label>
  84.                 <label><input type="radio" value="1" name="married">否</label>
  85.                 <label><input type="radio" value="2" name="married">离异</label>
  86.             </p>     
  87.  
  88.             <p>
  89.                 <label for="">爱好</label>
  90.                 <label><input type="checkbox" name="hobby_0" value="0" class="travel">旅游</label>
  91.                 <label><input type="checkbox" name="hobby_1" value="1">睡觉</label>
  92.                 <label><input type="checkbox" name="hobby_2" value="2">上网</label>
  93.                 <label><input type="checkbox" name="hobby_3" value="3">看电影</label>
  94.             </p>
  95.  
  96.             <p>
  97.                 <input type="submit" name="submit" value="提交" class="btn_submit"/>
  98.             </p>
  99.         </fieldset>
  100.     </form>
  101.     <p class="side">此处填写的内容可以用来判断是否刷新了页面<input type="text" /></p>
  102.     <script type="text/javascript" src="jquery-1.12.0.js"></script>
  103.     <script type="text/javascript" src="jquery.validate.js"></script>
  104.     <!-- 引入支持固定格式解析的jQuery插件，可以将验证规则全部编写到class属性中，当然我还没试过，好不好用就不知道了 -->
  105.     <script type="text/javascript" src="jquery.metadata.js"></script>
  106.     <script type="text/javascript" >
  107.         //DOM节点树生成后
  108.         $(document).ready(function() {
  109.  
  110.             //配置参数，选择器里放id或者class名都可以
  111.             $(".myform").validate({
  112.                 //通过name属性来设置验证规则
  113.                 rules: {
  114.                     username: {
  115.                             required:true, //也可以直接在标签里添加class="required"
  116.                             minlength:2  //设置最小长度
  117.                     },
  118.                     password: {
  119.                         required: true,
  120.                         minlength: 6
  121.                     },
  122.                     confirm_password: {
  123.                         required: true,
  124.                         minlength: 6,
  125.                         equalTo: "#password" //要求与指定元素的值相匹配
  126.                     },
  127.                     tel:{
  128.                         number:true //也可以直接在标签里添加class="number"
  129.                     },
  130.                     email:{
  131.                         email:true //也可以直接在标签里添加class="email"
  132.                     },
  133.                     url:"url", //可以直接在标签里添加class="url"，也可以像上面一样改成{url:true}
  134.                     code:{
  135.                         calculate:"1+1"
  136.                     }
  137.                 },  
  138.  
  139.                 //通过name属性来设置验证提示信息的内容
  140.                 messages: {
  141.                     username: {
  142.                             required:"用户名必填",
  143.                             minlength:"至少2个字符",
  144.                     },
  145.                     password: {
  146.                         required: "请输入密码",
  147.                         minlength: "密码不能少于6个字符"
  148.                     },
  149.                     confirm_password: {
  150.                         required: "请输入确认密码",
  151.                         minlength: "确认密码不能少于6个字符",
  152.                         equalTo: "密码输入不一致"
  153.                     },
  154.                     tel:{
  155.                         required:"请输入手机号码",
  156.                         number:"请输入数字"
  157.                     },
  158.                     email:"请输入一个邮件地址",
  159.                     url:"请输入一个网址"
  160.                 },
  161.  
  162.                 //自定义一个提交方法
  163.                 submitHandler: function(form) {
  164.                     alert("已经提交!");
  165.                 //  form.submit();
  166.                     $(form).ajaxSubmit();//和上面一行的结果一样，页面会被刷新一遍，不想刷新就用$.ajax()或者插件自带的remote方法
  167.                 },  
  168.  
  169.                 //想要不提交表单，只进行验证
  170.                 debug:true,
  171.  
  172.                 //忽略某些元素不验证
  173.                 ignore:".ignore", 
  174.  
  175.                 //指明错误放置的位置，默认是把错误信息放在验证的元素后面
  176.                 errorPlacement:function(error,element){
  177.                     element.siblings(".success").remove();//为了解决错误信息与正确信息同时出现的问题
  178.                     if (element.is(":radio")){
  179.                         error.appendTo(element.parent().next().next());
  180.                     }else if (element.is(":checkbox")){
  181.                         error.appendTo (element.next());
  182.                     }else{
  183.                         error.appendTo(element.parent());
  184.                     }
  185.                 },
  186.  
  187.                 //自定义验证提示信息的统一标签、样式和内容
  188.                 errorElement:"em",
  189.  
  190.                 //使用什么标签再把上边的errorELement包起来
  191.                 //wrapper:"div",
  192.  
  193.                 //把错误信息统一放在一个容器里面
  194.                 //errorLabelContainer:"#messageBox",
  195.  
  196.                 //label指向上面那个提示信息标签em，注意设置类名为success的样式，如果是提示错误信息，直接改类名为error的样式
  197.                 success:function(label){
  198.                     label.siblings("em").remove();//为了解决"可以啦"三个字会在每次验证正确时叠加在后面的问题
  199.                     label.text("可以啦").removeClass("error").addClass("success");
  200.                 },
  201.  
  202.                 //显示总共有多少个未通过验证的元素，用的时候会出现把这些元素的错误信息给隐藏掉的问题
  203.                 // showErrors:function(errorMap,errorList){
  204.                 //     console.log("有"+this.objectLength(this.invalid)+"个未通过验证的元素");
  205.                 // },
  206.  
  207.                 //修改验证的触发方式，以下均是boolean型
  208.                 onsubmit:true,//提交是验证，默认为true
  209.                 //以下参数虽然默认都是true，但其中有一些除非改为false，否则直接写true会报错
  210.             //    onfocusout:true,//失去焦点是验证(不包括checkboxes/radio buttons)
  211.             //    onkeyup:true,//在keyup时验证
  212.             //    onclick:true,//在checkboxes和radio点击时验证
  213.             //    focusInvalid:true,//提交表单后，未通过验证的表单会获得焦点
  214.                 focusCleanup:false,//如果是true那么当未通过验证的元素获得焦点时，移除错误提示同，这时要避免和 focusInvalid 一起用
  215.  
  216.                 //异步验证，即使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
  217.                 // remote: {
  218.                 //     url: "check-email.php",     //后台处理程序
  219.                 //     type: "post",               //数据发送方式
  220.                 //     dataType: "json",           //接受数据格式
  221.                 //     data: {                     //要传递的数据
  222.                 //         username: function() {
  223.                 //             return $("#username").val();
  224.                 //         }
  225.                 //     }
  226.                 // }
  227.  
  228.             });
  229.             //自定义一个验证方法，两个参数，一个是方法名，另一是回调函数，有三个参数，第一个是当前被验证元素的值 ，第二个是当前被验证的元素，第三个是传入的参数
  230.             $.validator.addMethod("calculate",function(val,ele,param){
  231.                 return val==eval(param)
  232.                 //return this.optional(ele) || val==eval(param)//不要求值为必填,如果将||改成&&会出现问题
  233.             },"请正确输入数学公式计算后的结果");
  234.  
  235.             //为一个单独的元素添加验证规则，前提是validate()方法必须首先被调用
  236.             $("#url").rules("add",{
  237.                 required:true
  238.             });
  239.             $("#tel").rules("add",{
  240.                 required:".travel:checked"//当旅游这个复选框被选中的时，手机号码就变成必填，还可以接一个function(){}，返回为真时需要验证
  241.             }) 
  242.  
  243.             //检查是否验证通过
  244.             $(".btn_submit").on("click",function(){
  245.                 console.log($(".myform").valid());
  246.             })
  247.  
  248.         });
  249. 　　　　</script>
  250. 　　</body>
  251. </html>

关于radio和checkbox、select的验证，radio的required表示必须选中一个，checkbox的required表示必须选中，checkbox的 minlength 表示必须选中的最小个数，maxlength表示最大的选中个数，rangelength:[2,3]表示选中个数区间，select 的 required 表示选中的 value不能为空，maxlength和rangelength:[2,3] 同上。

表单验证插件之jquery.validate.js的更多相关文章

  1. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  2. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  3. 简单的表单验证插件（Jquery）

    在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...

  4. 前端编程提高之旅（十）----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  5. 表单验证插件-validator.js 使用教程

    做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...

  6. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

随机推荐

  1. Angularjs环境搭建

    Angularjs架构搭建      1.搭建Angularjs项目           1)在package.json中配置如下,然后 npm install下载包     {   "na ...

  2. Linq在Array,List,Dictionary中的应用

    Linq在Array,List,Dictionary中的应用 今天在实际工作中需要对array,list,dictionary进行排序,试一试linq,发现非常好用,代码如下: using Syste ...

  3. 记录一次bug解决过程：规范变量名称和mybatis的使用以及代码优化

    一.总结 Mybatis中当parameterType为基本数据类型的时候,统一采用_parameter来代替基本数据类型变量. Mybatis中resultMap返回一个对象,resultType返 ...

  4. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  5. bootstrap杂记

    http://v3.bootcss.com/ 这个国内的中文站点资料很全 如下看个页面的大体框架 http://www.cnblogs.com/sunhaoyu/p/4275190.html < ...

  6. Android Weekly Notes Issue #227

    Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...

  7. [转]ASP.NET应用程序生命周期趣谈(二)

    在上回书开始的时候我们提到博客园的IIS看了一眼我的请求后就直接交给ASP.NET去处理了,并且要求ASP.NET处理完之后返回HTML以供展示. 那么我们不仅要问: 1,    IIS肯定是没有眼睛 ...

  8. Swift-数组

    Swift数组 OC和Swift数组的比较 OC 只能存放对象 swift 既可以存放对象,又可以存Int,Float等基本数据类型 下面是swift数组的具体示范 空数组 let arr = [] ...

  9. SQLSERVER基础语句(一)

    1.插入一行数据:INSERT INTO 表名(列名)VALUES(对应的值);2.一次性插入多条数据先建表:INSERT INTO 新建表名(列表)SELECT 原始表列名 FROM 原始表:执行时 ...

  10. git基础

    1.新的未跟踪文件 新创建的README文件没有进行任何跟踪 $ git status On branch master Untracked files: (use "git add < ...