一、效果图：

二、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. SQLServer：无法生成 SSPI 上下文(Cannot generate SSPI context)

    服务器版本:windows Server 2012 R2 数据库版本: SQLServer 2016 +sp1 SQL2016AlwaysOn群集: 由于重启过域控,造成后续的部分服务器也解析不到DN ...

  2. PHP正在进行时-字符串动态插入变量

    在PHP中,一般用双引号或者单引号将字符串括起来. echo "张三李四王五叫上赵六一起去'喝酒'". 如果要动态将将数据插入到字符串中,我们除了使用.号拼接,还可以通过使用{}来 ...

  3. 学习总结:工程管理与makefile

    工程管理与makefile 一.为什么需要makefile和make 一个工程中的源文件可能很多,按照类型.功能.模块分别放在若干个目录中,为了有效地管理软件工程,更高效地编译整个工程,需要用到mak ...

  4. Kotlin——从无到有系列教程（5）： 你该知道的Kotlin可空类型、空安全（null）、类型转换等特性

    在我们熟知的Java中,定义一个变量可以默认不赋值,因为Java的系统会给我们默认赋一个默认值,并且Java可定义一个赋值为null的变量,这样在使用这个变量的时候都会去显示判断该变量是否为null. ...

  5. RichErp - export import 用法

    // --file.js-- function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = functi ...

  6. Haproxy原理(1)

    一.四层和七层负载均衡的区别 所谓的四层就是ISO参考模型中的第四层.四层负载均衡也称为四层交换机,它主要是通过分析IP层及TCP/UDP层的流量实现的基于IP加端口的负载均衡.常见的基于四层的负载均 ...

  7. 没有robots.txt文件是否会影响收录呢

    Spider在抓取您的网站之前,会访问您的robots.txt 文件,以确定您的网站是否会阻止 蜘蛛抓取任何网页或网址.如果您的 robots.txt 文件存在但无法访问(也就是说,如果它没有返回 2 ...

  8. Mybatis之基于XML的增删改查

    这里先吐槽下,写的半天的东西,IE浏览器弹出调试窗口导致写的东西全部没保存,搞得我还要重新用谷歌写,思路全没了,fuck. 前面学习了下spring的DAO层,说起DAO层,那ORM肯定是少不了的,O ...

  9. strncmp函数——比较特定长度的字符串

    strncmp函数用于比较特定长度的字符串. 头文件:string.h. 语法  int strncmp(const char *string1, const char *string2, size_ ...

  10. Spring框架学习笔记（9）——Spring对JDBC的支持

    一.使用JdbcTemplate和JdbcDaoSupport 1.配置并连接数据库 ①创建项目并添加jar包,要比之前Spring项目多添加两个jar包c3p0-0.9.1.2.jar和mysql- ...