写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，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. mac安装虚拟机VirtualBox,并在虚拟机上安装centos

    1. 首先从网页上https://www.virtualbox.org/wiki/Downloads下载VirtualBox-6.0.0-127566-OSXdmg文件.我一般把下载的文件放到/opt ...

  2. NGUI-UIScroll View的使用及注意点

    项目层次: scrollviewbg是600x150的背景图,Inspector视图如下: panel就是scrollview父容器了,size为600x150,Inspector视图如下: item ...

  3. 求：斐波那契数列的第n项

    def he (n): if n < 3 : return 1 return he(n-1)+he(n-2)print(he(n))

  4. IPMITool driver

    官网链接: https://docs.openstack.org/ironic/latest/admin/drivers/ipmitool.html IPMITool driver 概述IPMI(In ...

  5. webpack + less

    使用less需要安装 'style-loader','css-loader','less-loader' 三个loader. 安装之后在webpack.config.js配置 const path = ...

  6. spark与storm比对与选型

    大数据实时处理平台市场上产品众多,本文着重讨论spark与storm的比对,最后结合适用场景进行选型. 一.spark与storm的比较 比较点 Storm Spark Streaming 实时计算模 ...

  7. echarts异步加载

    echarts体积很大,在移动端使用异步加载是一种提高渲染速度的方法,结合webpack的做法如下: require.ensure([], function(require){ const echar ...

  8. 仿今日头条按钮loading效果

    效果 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. Codeforces Round #516 (Div. 2）D. Labyrinth

    D. Labyrinth 题目链接:https://codeforces.com/contest/1064/problem/D 题意: 给出一个n*m的矩阵以及人物的起点,并且给出x,y,分别代表这个 ...

  10. bzoj [Sdoi2014]数数 AC自动机上dp

    [Sdoi2014]数数 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1264  Solved: 636[Submit][Status][Discu ...