一、效果图：

二、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 文件禁用 ESLint 语法校验

    问题描述: 在 Vue-cli 创建的项目中,使用了 ESLint 规范代码的项目中 如何针对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留 ESLint 的校验规则? 解决方案: ...

  2. element-ui+vuex共享自定义方法进行表单验证 validator

    element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...

  3. vue2 vue-router 组装

    适用于vue cli搭建的项目 vue-router模块下载及记录到package.json中: npm i vue-router -D main.js中: import VueRouter from ...

  4. 【精选】Nginx模块Lua-Nginx-Module学习笔记（一）Nginx Lua API 接口详解

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis 一.介绍 各种* _by_lua,* _by_lua_block和* _by_lua_file配置指令用 ...

  5. Oracle相关知识做个总结

    一.创建用户: 以系统管理员登陆,右键点击Uers进行新建, 一般:默认空间选择USERS,临时表空间选择TEMP,概要文件选择DEFAULT. 对象权限:不做操作. 角色权限:1.connect 2 ...

  6. com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector APPARENT DEADLOCK

    最近在IDEA中启动Tomcat经常会碰到这个错误,起初.一直没在意,现在碰到的次数多了,就去查看下这个问题,现描述如下: =2018-01-08 14:27:30,216 WARN [com.mch ...

  7. python_第2课

    前言 回顾一下python+selenium基础,并整理相关知识点,分享给有需要,在前进道路上的朋友. 由于不是在python中敲的代码,有可能有缩进等相关错误,请自行检查 数据类型 #python中 ...

  8. Linux中创建新用户并赋给指定文件权限

    工作中用到了,写篇日志总结一下. 创建新的用户: 第一种方式: 创建用户: adduser name 创建密码: passwd name(回车后出现修改密码的提示) 该方式创建的用户目录默认在home ...

  9. Python正则表达式返回首次匹配到的字符及查询的健壮性

    re.findall(pattern,string)会搜索所有匹配的字符,返回的是一个列表,获取首个匹配需要re.findall(pattern,string)[0]访问, 但是如果findall没匹 ...

  10. 加速scp传输速度

    当需要在机器之间传输400GB文件的时候,你就会非常在意传输的速度了.默认情况下(约125MB带宽,网络延迟17ms,Intel E5-2430,本文后续讨论默认是指该环境),scp的速度约为40MB ...