写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，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. Python全栈（一）编程语言介绍

    一.编程语言介绍 程序是计算机能读懂的语言,是人和计算机沟通的方式. 计算机无法理解符号,只能理解0,1的二进制. 计算机内的运行状态就像灯泡的开关一样来表示各庄状态,两个灯泡能表示4种状态,无数的灯 ...

  2. vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  3. 使用puTTY或Xshell连接阿里云TimeOut超时

    根据网上很多主流的说法,我依次检查了 ssh: service sshd status 防火墙:service iptables stop (CentOS 7好像已经没有这个iptable了) 都没有 ...

  4. 使用 Entity Framework 返回 JsonResult 时循环引用的避免【EF 转 JSON】

    var ui = (from u in _db.USER_INFO select u).FirstOrDefault(); // 单个实体的用法 ZRQCommon.EntitiesTools e = ...

  5. 第十六篇：django基础

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

  6. 第十三篇：HTML

    本篇内容 选择器 属性 一. 选择器 1.id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. <!DOCTY ...

  7. 【bzoj5015】[Snoi2017]礼物 矩阵乘法

    题目描述 热情好客的请森林中的朋友们吃饭,他的朋友被编号为 1-N,每个到来的朋友都会带给他一些礼物:.其中,第一个朋友会带给他 1 个,之后,每一个朋友到来以后,都会带给他之前所有人带来的礼物个数再 ...

  8. POJ3585 Accumulation Degree 【树形dp】

    题目链接 POJ3585 题解 -二次扫描与换根法- 对于这样一个无根树的树形dp 我们先任选一根进行一次树形dp 然后再扫一遍通过计算得出每个点为根时的答案 #include<iostream ...

  9. 洛谷 P3349 [ZJOI2016]小星星 解题报告

    P3349 [ZJOI2016]小星星 题目描述 小\(Y\)是一个心灵手巧的女孩子,她喜欢手工制作一些小饰品.她有\(n\)颗小星星,用\(m\)条彩色的细线串了起来,每条细线连着两颗小星星. 有一 ...

  10. 1031. 高一学堂 （at）

    题目描述 在美丽的中山纪念中学里面,有一座高一学堂.所谓山不在高,有仙则名:水不在深,有龙则灵.高一学堂,因为有了yxr,就成了现在这个样子 = =. 由于yxr的语言太过雷人,每次他发微往往都会有一 ...