写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，jquery的validate插件就还可以，对于基本的需求已经够了。这里记录下基本的用法。

　　还是写个简单的demo吧

<html>

  <head>

    <meta name="viewport" content="width=device-width" />

    <title>Jquery表单校验插件validate</title>

    <%--jqury插件--%>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>

    <%--validate插件--%>

    <script src="${baseURL}/ligerui/jquery-validation/jquery.validate.min.js"></script>

    <%--中文提示插件--%>

    <script src="${baseURL}/ligerui/jquery-validation/messages_cn.js" type="text/javascript"></script>

  </head>

  <body>

  <div >

    <form id="myform">

      <table>

        <tr>

          <td>

           ID

          </td>

          <td>

            <input type="text"  id="input_id" name="perCode" style="border:0.5px solid #fac090"/>

          </td>

        </tr>

        <tr>

          <td>

           Name

          </td>

          <td>

            <input type="text"  id="input_name" name="perName" style="border:0.5px solid #fac090"/>

          </td>

        </tr>

        <tr>

          <td>

            Role

          </td>

          <td>

            <select id="sel_role" name="role"  data-width="150px" style="">

              <option>工程师</option>

              <option>PM</option>

            </select>

          </td>

        </tr>

        <tr>

          <td>性别</td>

          <td style="text-align: center"><input type="radio" name="sex" value="1" checked/>男 &nbsp&nbsp&nbsp<input type="radio" name="sex" value="0"/>女</td>

        </tr>

        <tr>

          <td>爱好</td>

          <td>

            <input type="checkbox" name="favorite" value="1" /> &nbsp;赚钱 &nbsp;&nbsp;

            <input type="checkbox" name="favorite" value="2"/> &nbsp;唱歌

            <input type="checkbox" name="favorite" value="3"/> &nbsp;游戏

          </td>

        </tr>

        <tr>

          <td>

            <input id="btn_commit" type="button" value="提交"/>

          </td>

        </tr>

      </table>

    </form>

  </div>

  </body>

<script>

    $(function(){

        //表单验证

        $("#btn_commit").click(function(){

            var myflag = $("#myform").validate({

                //onfocusout:true,// 是否在获取焦点时验证

                rules:{

                    //字段的name属性:"校验器"

                    perCode:"required",//required在此含义是必填

                    //字段的name属性:{校验器:值,校验器:值}

                    perName:"required",

                    role : "required",

                    sex:"required",

                    favorite:"required",

                },

                messages: { //自定义错误信息，

                    perName: {

                        required: "用户名必填"

                    }

                },

                errorPlacement: function(error, element) { //指定错误信息位置

                    if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox

                        var eid = element.attr('name'); //获取元素的name属性

                        error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面

                    } else {

                        error.insertAfter(element);

                    }

                    //错误信息提示颜色

                    error.css("color","red");

                },

            });

            if(!(myflag.form())){

                //表单校验不通过

                return ;

            }

            //表单校验通过 提交表单

            $.ajax(

                {

                    //...

                }

            );

        });

    });

</script>

</html>

　　jquery表单的验证还是比较简单的，这里的用法也只是简单的写了个demo，如果要验证radio与checkbox的时候，最好指定下错误信息出现的位置，比较好看点

　　主要的步骤：

　　1.导入jquery插件以及validate的相关插件

　　2.调用validate()方法，在里面编写对应的需要校验的字段，以及校验规则

　　其实网上的demo例子很多，也比我这个解释详细的多，这里只是简单的记录下，对于复杂的校验规则我这里也没有写出来，之后可以查阅相关的资料即可。

　　

demo效果图：

Jquery表单验证插件validate的更多相关文章

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

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

  2. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  3. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  4. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  5. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  6. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  7. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  8. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  9. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

随机推荐

  1. HTML--留

    1.html图像   <p> 这是个图像<img src=“\路径\”  alt=“图像不显示不出来时代替图片” width=“1” height=“1” >   </p ...

  2. Codeforces 1088E 树形dp+思维

    比赛的时候看到题意没多想就放弃了.结果最后D也没做出来,还掉分了,所以还是题目做的太少,人太菜. 回到正题: 题意:一棵树,点带权值,然后求k个子连通块,使得k个连通块内所有的点权值相加作为分子除以k ...

  3. hadoop-hdfs(三)

    HDFS概念 1 数据块* HDFS的一个数据块默认是64M,与元数据分开管理. 优点: 数据块的大小设计的较大,所以寻址占传输的时间比例较小,只需要计算传输速度即可. 便于简化管理,利于计算剩余空间 ...

  4. J2EE的十三个技术——EJB之概述

    含义: 企业级的JavaBeans(Enterprise JavaBean),其设计目标是部署分布式应用程序. EJB是J2EE的一部分,称为Java企业Bean,它把使用Java开发的服务器组件的部 ...

  5. 【DNS】DNS的几个基本概念

    一． 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点,而这也已经成为了习惯. 根域服 ...

  6. 第十六篇：django基础

    本篇内容 创建程序 程序目录 流程介绍 login实例 一.创建程序 命令行: django-admin startproject sitename. 常用命令: python manage.py r ...

  7. P3141 [USACO16FEB]围栏Fenced In_Platinum

    题目描述 Farmer John has realized that many of his cows are strangely agoraphobic (being fearful of larg ...

  8. BZOJ1877 [SDOI2009]晨跑 【费用流】

    题目 Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他 坚持下来的只有晨跑. 现在给出一张学校附近的地图,这张地图中包含N个十字路口和M条街道 ...

  9. JavaScript—获取本地时间以12小时制显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Python学习笔记（Django篇）——4、继续完善视图层

    在demo/views.py中添加这些代码: def detail(request, question_id): returnHttpResponse("You're looking at ...