一、效果图：

二、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. HDU5979 Convex

    /* HDU5979 Convex http://acm.hdu.edu.cn/showproblem.php?pid=5979 计算几何 三角形面积公式 * * */ #include <cs ...

  2. HDU 4365

    把涂色的格子按对称旋转至左上角. 当未涂色时,若要符合要求,则必须要求每一圈矩形都是上下左右对称的.注意是一圈的小矩形.对于N*N的阵,若最外层一圈的小矩形要符合要求,则(假设N%2==0)可以涂色的 ...

  3. stylesheet_link_tag，javascript_include_tag无效？

    stylesheet_link_tag,javascript_include_tag无效? http://stackoverflow.com/questions/28241981/rails-4-ex ...

  4. hdu 5335 Walk Out (2015 Multi-University Training Contest 4)

    Walk Out                                                                         Time Limit: 2000/10 ...

  5. Codeforces Round #272 (Div. 2) 题解

    Codeforces Round #272 (Div. 2) A. Dreamoon and Stairs time limit per test 1 second memory limit per ...

  6. Common webpart properties in kentico

    https://devnet.kentico.com/docs/7_0/devguide/index.html?common_web_part_properties.htm HTML Envelope ...

  7. hdoj--5532--Almost Sorted Array(正反LIS)

    Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...

  8. Oracle RAC 全局等待事件 gc current block busy 和 gc cr multi block request 说明--转载（http://blog.csdn.net/tianlesoftware/article/details/7777511）

    一．RAC 全局等待事件说明 在RAC环境中,和全局调整缓存相关的最常见的等待事件是global cache cr request,global cache busy和equeue. 当一个进程访问需 ...

  9. 36.QT地图

    widget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QGraphicsView> #include <QLabel& ...

  10. 13.QT多窗口切换list

    Dialog::Dialog(QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { ui->setupUi(this); list = ...