一、效果图：

二、JqueryValidate的好处

在做注册、或者类似以上的表单提交的时候，大家是不是都很烦那种，把数据拿到后台去判断，

可能经过了正则表达式之类的复杂判断，然后发现数据错误。接着通过request转发到页面上，再通过EL

表达式输出错误信息。实话实话，在没发现这个插件之前，我是这么干的，好痛苦的感觉。

JqueryValidate的好处就在于，你不必经过servlet，就可以在页面上面判断用户输入的信息是否正确，它能够快速实现

表单的校验。

三、引入插件

  • 顺序不能乱，此插件是依赖于jquery的

四、给你的表单添加一个id

五、使用

  • 格式
$("#表单的id").validate({

    rules:{

        "input的name属性的值":{

            "校验规则":布尔值,

        }...

    },

    messages:{

        ""input的name属性的值":{

            "校验规则":"提示信息",

    }...

});
  • 校验规则 （详看：http://www.runoob.com/jquery/jquery-plugin-validate.html）

  • 源代码
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="${ctx}/js/jquery.validate.min.js"/></script>

<script  type="text/javascript" charset="utf-8">

//表单校验

$("#checkform").validate({

    rules:{

        "customer_id":{

            "required":true,

        },

        "mustPay":{

            "required":true,

            "number":true

        },

        "hadPaid":{

            "required":true,

            "number":true

        },

        "order_profit":{

            "required":true,

            "number":true

        },

        "orderTime":{

            "required":true,

             "date":true

        }

    },

    messages:{

        "customer_id":{

            "required":"不能为空",

        },

        "mustPay":{

            "required":"不能为空",

            "number":"需要数字"

        },

        "hadPaid":{

            "required":"不能为空",

            "number":"需要数字"

        },

        "order_profit":{

            "required":"不能为空",

            "number":"需要数字"

        },

        "orderTime":{

            "required":"不能为空",

        }

    }

});

</script>

</head>

<body>

<form id="checkform" action=" " method="post">

        客&ensp;&ensp;&ensp;&ensp;户:<select type="text" name="customer_id" >

                <option >客户1</option>

                <option >客户2</option>

                <option >客户3</option>

        </select><br>

        应付金额:<span style="width: 20px; color:#E31D1A; font-size:20px;  display: inline-block; margin-left:48px; text-align:center;">￥</span><input style="width: 180px;margin-left: 0px;" type="text" name="mustPay" ><br>

        已付金额:<span style="width: 20px; color:#E31D1A; font-size:20px;  display: inline-block; margin-left:48px; text-align:center;">￥</span><input  style="width: 180px;margin-left: 0px;" type="text" name="hadPaid" ><br>

        利&ensp;&ensp;&ensp;&ensp;润:<span style="width: 20px; color:#E31D1A; font-size:20px;  display: inline-block; margin-left:48px; text-align:center;">￥</span><input  style="width: 180px;margin-left: 0px;" type="text" name="order_profit"><br>

        下单时间:<input type="text" name="orderTime" id="pickdate"><br> 

                <input type="submit" style="float: right;" value="提交">

</form>

</body>

</html>

[知了堂学习笔记]_Jquery_Validate 表单校验的使用的更多相关文章

  1. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  2. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. 2.12 学习总结 之 表单校验插件validate

    一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...

  5. 【知了堂学习笔记】java 自定义异常

    java 常见异常种类(Java Exception): 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCas ...

  6. 【知了堂学习笔记】java 正则表达式

    本文参考网络上面别人的博客知识产出 正则表达式基础 1.句号 假设你想要找出三个字母的单词,而且这些单词必须以“t”字母开头,以“n”字母结束.另外,假设有一本英文字典,你可以用正则表达式搜索它的全部 ...

  7. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  8. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  9. [知了堂学习笔记]_ajax的两种使用方式

    一.Ajax概述 1．什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...

随机推荐

  1. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  2. g4e基础篇#3 Git安装与配置

    g4e 是 Git for Enterprise Developer的简写,这个系列文章会统一使用g4e作为标识,便于大家查看和搜索. 章节目录 前言 1. 基础篇: 为什么要使用版本控制系统 Git ...

  3. Qt用Zip压缩文件夹的一些坑

    环境: QT3.3.8 vs2005 QDir dir("/home/Blinux/html"); if ( !dir.exists() ) { //目录不存在 } QString ...

  4. Linux上leveldb的安装和使用

    1.首先从官网上下载leveldb进行编译 git clone https://github.com/google/leveldb.git cd leveldb make 2.将头文件和动态链接库拷到 ...

  5. python3之运算符

    1.python算术运算符 >>> a=15 >>> b=5 >>> a+b #加 20 >>> a-b #减 10 >& ...

  6. windows 异常处理

    为了程序的健壮性,windows 中提供了异常处理机制,称为结构化异常,异常一般分为硬件异常和软件异常,硬件异常一般是指在执行机器指令时发生的异常,比如试图向一个拥有只读保护的页面写入内容,或者是硬件 ...

  7. JavaScript（六）函数

    函数的声明方式 function name () {}  函数声明 var name = function(){}  函数表达式 所有函数都有返回值  未return 的函数  返回值 是  unde ...

  8. js和native交互方法浅析

    一.背景 最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路. 二.解决方案之WebViewJavascriptBridge 想要和app交互,必须在app上先把bridge进 ...

  9. Python中的数据类型以及他们的方法

    数据类型: 1)int i = 100 print(i.bit_length()) ''' bit_length 1 0000 0001 1 2 0000 0010 2 3 0000 0011 2 2 ...

  10. 洛谷 P3377 【模板】左偏树（可并堆）

    洛谷 P3377 [模板]左偏树(可并堆) 题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或 ...