引入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. 2018-2019, ICPC, Asia Yokohama Regional Contest 2018 K

    传送门:https://codeforces.com/gym/102082/attachments 题解: 代码: /** * ┏┓ ┏┓ * ┏┛┗━━━━━━━┛┗━━━┓ * ┃ ┃ * ┃ ━ ...

  2. [vim]乱码问题

    在vim输入中文乱码 1. 检查系统是否支持中文 locale -a 没有中文支持 安装中文包 apt-get install language-pack-zh-hans -y 2.这样可以输入中文了 ...

  3. JAX-WS搭建WebService和客户端访问程序

    开发环境:myeclipse8.6+jdk1.6.0_29+tomcat6.0.37 XFire搭建webservice: http://www.cnblogs.com/gavinYang/p/352 ...

  4. ZOJ 3778 C - Talented Chef 水题

    LINK:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3778 题意:有n道菜,每道菜需要\(a_i\)道工序,有m个锅可 ...

  5. 浅谈桶排思想及[USACO08DEC]Patting Heads 题解

    一.桶排思想 1.通过构建n个空桶再将待排各个元素分配到每个桶.而此时有可能每个桶的元素数量不一样,可能会出现这样的情况:有的桶没有放任何元素,有的桶只有一个元素,有的桶不止一个元素可能会是2+: 2 ...

  6. 微信小程序导航设置

    "tabBar": { "backgroundColor": "#ffffff", "color": "#00 ...

  7. 2017中国大学生程序设计竞赛 - 网络选拔赛 1003 HDU 6152 Friend-Graph （模拟）

    题目链接 Problem Description It is well known that small groups are not conducive of the development of ...

  8. 2017ACM暑期多校联合训练 - Team 2 1011 HDU 6055 Regular polygon （数学规律）

    题目链接 **Problem Description On a two-dimensional plane, give you n integer points. Your task is to fi ...

  9. P2622 关灯问题II (状态压缩入门)

    题目链接: https://www.luogu.org/problemnew/show/P2622 具体思路:暴力,尝试每个开关,然后看所有的情况中存不存在灯全部关闭的情况,在储存所有灯的情况的时候, ...

  10. F - Debate CodeForces - 1070F 思维

    题目链接:https://vjudge.net/problem/CodeForces-1070F 具体思路:首先把所有的00放进去,然后对于10 和01 的取两个数目最小值t,排完序后将前t个加起来, ...