引入JS

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/jquery.validate.js"></script>

加载自定义验证

 <script>

        $(document).ready(function () {

            $("#formid").validate({

                rules: {

                    username: { required: true, minlength:  },

                    price: { required: true, digits: true }

                },

                messages: {

                    username: { required: "必须填写", minlength: "最少8个字符" },

                    price: { required: "必须填写", digits: "必须填写整数" }

                },　　　　　　　　　　
                errorElement: "em",
                success: function (label) {
                    label.text("OK").addClass('success')
                }

            });

        });

    </script>

完整页面代码:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Rep</title>
    <style>
        em.error {
            background-color:blue;
            background: url("images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

        em.success {
            background-color:red;
            background: url("images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>

    <script>
        $(document).ready(function () {
            $("#formid").validate({
                rules: {
                    username: { required: true, minlength: 8 },
                    price: { required: true, digits: true }
                },
                messages: {
                    username: { required: "必须填写", minlength: "最少8个字符" },
                    price: { required: "必须填写", digits: "必须填写整数" }
                },
                errorElement: "em",
                success: function (label) {
                    label.text("OK").addClass('success')
                }
            });
        });

    </script>
</head>
<body>
    <form id="formid">
        <input id="username" name="username" size="25" value="" />
        <input id="price" name="price" size="25" value="" />

        <input id="Submit1" type="submit" class="submit" value="submit" />

    </form>
</body>
</html>

设置的规格

序号     规则     描述

     required:true     必须输入的字段。

     remote:"check.php"     使用 ajax 方法调用 check.php 验证输入值。

     email:true     必须输入正确格式的电子邮件。

     url:true     必须输入正确格式的网址。

     date:true     必须输入正确格式的日期。日期校验 ie6 出错，慎用。

     dateISO:true     必须输入正确格式的日期（ISO），例如：--，//。只验证格式，不验证有效性。

     number:true     必须输入合法的数字（负数，小数）。

     digits:true     必须输入整数。

     creditcard:     必须输入合法的信用卡号。

     equalTo:"#field"     输入值必须和 #field 相同。

     accept:     输入拥有合法后缀名的字符串（上传文件的后缀）。

     maxlength:     输入长度最多是  的字符串（汉字算一个字符）。

     minlength:     输入长度最小是  的字符串（汉字算一个字符）。

     rangelength:[,]     输入长度必须介于  和  之间的字符串（汉字算一个字符）。

     range:[,]     输入值必须介于  和  之间。

     max:     输入值不能大于 。

     min:     输入值不能小于 。

jquery 验证的更多相关文章

  1. ASP.NET MVC的客户端验证：jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

  2. jquery验证

    首先要引用js库 <script src="js/jquery-1.7.2.min.js"></script> jquery验证方式 function ch ...

  3. jQuery验证元素是否为空的两种常用方法

    这篇文章主要介绍了jQuery验证元素是否为空的两种常用方法,实例分析了两种常用的判断为空技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给 ...

  4. jquery验证手机号码、邮箱格式是否正确示例代码

    本文为大家介绍下使用jquery验证邮箱.验证手机号码,具体实现思路及代码如下,感兴趣的朋友可以学习下 复制代码代码如下: //jquery验证邮箱  function checkSubmitEmai ...

  5. jquery验证网址格式

    在input中输入网址,用jquery验证输入网址是否正确 <input type="text" name="input-web" class=" ...

  6. 使用jQuery验证用户名是否存在，达到局部刷新的效果

    <%@ page pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  7. jQuery验证框架 .

          目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查     CSDN社区“三八节”特别活动      开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...

  8. jQuery验证表单格式

    工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...

  9. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

  10. jQuery验证插件

    原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate. ...

随机推荐

  1. 【题解】Inspection UVa 1440 LA 4597 NEERC 2009

    题目传送门:https://vjudge.net/problem/UVA-1440 看上去很像DAG的最小路径覆盖QwQ? 反正我是写了一个上下界网络流,建模方法清晰易懂. 建立源$s$,向每个原图中 ...

  2. Bolt XML和JQBolt Lua代码自动补全插件配置教程

    Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bo ...

  3. Python学习笔记（四十六）网络编程（2）— UDP编程

    摘抄:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014320049779 ...

  4. Codeforces Round #191 (Div. 2) B. Hungry Sequence（素数筛选法）

    . Hungry Sequence time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. Kali设置代理

    原文:Kali-linux设置ProxyChains ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SO ...

  6. 如何写出优雅的js以及js特殊技巧

    由于代码和解释都写在了github的readme内部,这里就直接附上github:https://github.com/jiangzhenfei/pretty-js/tree/master

  7. bzoj 3083 树链剖分

    首先我们先将树提出一个根变成有根树,那么我们可以通过树链剖分来实现对于子树的最小值求解,那么按照当前的根和询问的点的相对位置关系我们可以将询问变成某个子树和或者除去某颗子树之后其余的和,前者直接询问区 ...

  8. $.when()方法翻译2

    mac不知道为何,文章字数一多,浏览器就重启.只好分开写了. In the event a Deferred was resolved with no value, the corresponding ...

  9. B - GuGuFishtion(莫比乌斯 欧拉函数 预处理mu函数的欧拉函数的模板)

    题目链接:https://cn.vjudge.net/contest/270608#problem/B 题目大意:题目中说,就是对欧拉函数的重新定义的一种函数的求和. 证明方法: AC代码: #inc ...

  10. php遍历路径——php经典实例

    php遍历路径——php经典实例 代码: <html> <head> <title>遍历目录</title> <meta charset=&quo ...