一、效果图：

二、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. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

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

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

  3. angularJs表单校验（超级详细！！！）

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  4. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  5. 关于jQuery表单校验的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. php 表单校验函数库（判断email格式是否正确、http地址是否合法有效、手机号码是否合法）

    /** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($e ...

  7. 关于jQuery表单校验

    <style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...

  8. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

随机推荐

  1. XML文件基础

      https://c3d.club/xml/basic/2018/12/27/xml-file-base.html 1.文件头 XML文件头有XML声明与DTD文件类型声明组成.其中DTD文件类型声 ...

  2. C#中的IEnumerable<T>知识点

    1.扩展IEnumerable<T>的方法 使继承了IEnumeralbe<T>的接口有了MyS方法 static class MySum {                  ...

  3. 洛谷—— P1204 [USACO1.2]挤牛奶Milking Cows

    https://www.luogu.org/problem/show?pid=1204 题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶, ...

  4. rabbitMQ学习笔记(六) topic类型消息。

    上一节中使用了消息路由,消费者可以选择性的接收消息. 但是这样还是不够灵活. 比如某个消费者要订阅娱乐新闻消息 . 包括新浪.网易.腾讯的娱乐新闻.那么消费者就需要绑定三次,分别绑定这三个网站的消息类 ...

  5. Android-自己定义标题栏

    Android-自己定义标题栏 2014年4月25日 分享知识点 最近也比較多事情,想发发博客就是心有余而力不足,本篇博文主要教大家怎样实现自己定义标题栏,非常easy.那么聪明的你一下就看懂. 有兴 ...

  6. @Autowired 凝视遇到的问题,@Qualifier 帮助解决这个问题

    当候选 Bean 数目不为 1 时的应对方法 在默认情况下使用 @Autowired 凝视进行自己主动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个. 当找不到一个匹配的 Be ...

  7. 数论TIPS(Loading...)

    1.一个数的约数和=(1+p1+p12+...+p1c1)*(1+p2+p22+...+p2c2)*...*(1+pk+pk2+...+pkck)(p为这个数的各个质因数,c表示为各个质因数的次方,k ...

  8. ROS中安装任意版本的OPENCV

    转自:http://tieba.baidu.com/p/5023000237 安装 Opencv 3.2 on Ubuntu 16.04 并创建node测试 step 1: 安装一些package s ...

  9. Spark RDD概念学习系列之Pair RDD的action操作

    不多说,直接上干货! Pair RDD的action操作 所有基础RDD 支持的行动操作也都在pair RDD 上可用

  10. IIS7.0与AP.NET

    IIS7在请求的监听和分发机制上进行了革新性的改进,主要体现在对于Windows进行激活服务(Windows Process Activation Service ,WAS)的引入,将原来的W3SVC ...