引入JS

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

加载自定义验证

  1.  <script>
  2.         $(document).ready(function () {
  3.             $("#formid").validate({
  4.                 rules: {
  5.                     username: { required: true, minlength:  },
  6.                     price: { required: true, digits: true }
  7.                 },
  8.                 messages: {
  9.                     username: { required: "必须填写", minlength: "最少8个字符" },
  10.                     price: { required: "必须填写", digits: "必须填写整数" }
  11.                 },　　　　　　　　　　
                    errorElement: "em",
                    success: function (label) {
                        label.text("OK").addClass('success')
                    }
  12.             });
  13.         });
  14.  
  15.     </script>

完整页面代码:

  1. <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;
            }
  2.  
  3.         em.success {
                background-color:red;
                background: url("images/checked.gif") no-repeat 0px 0px;
                padding-left: 16px;
            }
  4.  
  5.     </style>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery.validate.js"></script>
  6.  
  7.     <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')
                    }
                });
            });
  8.  
  9.     </script>
    </head>
    <body>
        <form id="formid">
            <input id="username" name="username" size="25" value="" />
            <input id="price" name="price" size="25" value="" />
  10.  
  11.         <input id="Submit1" type="submit" class="submit" value="submit" />
  12.  
  13.     </form>
    </body>
    </html>
  14.  

设置的规格

  1. 序号     规则     描述
  2.      required:true     必须输入的字段。
  3.      remote:"check.php"     使用 ajax 方法调用 check.php 验证输入值。
  4.      email:true     必须输入正确格式的电子邮件。
  5.      url:true     必须输入正确格式的网址。
  6.      date:true     必须输入正确格式的日期。日期校验 ie6 出错，慎用。
  7.      dateISO:true     必须输入正确格式的日期（ISO），例如：--，//。只验证格式，不验证有效性。
  8.      number:true     必须输入合法的数字（负数，小数）。
  9.      digits:true     必须输入整数。
  10.      creditcard:     必须输入合法的信用卡号。
  11.      equalTo:"#field"     输入值必须和 #field 相同。
  12.      accept:     输入拥有合法后缀名的字符串（上传文件的后缀）。
  13.      maxlength:     输入长度最多是  的字符串（汉字算一个字符）。
  14.      minlength:     输入长度最小是  的字符串（汉字算一个字符）。
  15.      rangelength:[,]     输入长度必须介于  和  之间的字符串（汉字算一个字符）。
  16.      range:[,]     输入值必须介于  和  之间。
  17.      max:     输入值不能大于 。
  18.      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. 使用rabbitmq消息队列

    一.前言 在python中本身就是存在队列queue.一个是线程队列queue,另一个是进程multiprocessing中的队列Queue. 线程queue:只用于线程之间的数据交互 进程Queue ...

  2. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

  3. CodeBlocks的常用快捷键

    CodeBlocks常用操作快捷键 编辑部分: Ctrl + A:全选 Ctrl + C:复制 Ctrl + X: 剪切 Ctrl + V:粘贴 Ctrl + Z:撤销 Ctrl + S:保存 Ctr ...

  4. HDU 6158 笛卡尔定理 几何

    LINK 题意:一个大圆中内切两个圆,三个圆两两相切,再不断往上加新的相切圆,问加上的圆的面积和.具体切法看图 思路:笛卡尔定理: 若平面上四个半径为r1.r2.r3.r4的圆两两相切于不同点,则其半 ...

  5. POJ 2318/2398 叉积性质

    2318 2398 题意:给出n条线将一块区域分成n+1块空间,再给出m个点,询问这些点在哪个空间里. 思路:由于只要求相对位置关系,而对具体位置不关心,那么易使用叉积性质得到相对位置关系(左侧/右侧 ...

  6. Why are Eight Bits Enough for Deep Neural Networks?

    Why are Eight Bits Enough for Deep Neural Networks? Deep learning is a very weird technology. It evo ...

  7. （转）使用Excel批量给数据添加单引号和逗号

    在使用PLSQL连接oracle数据库处理数据的过程中,常用的操作是通过ID查询出数据,ID需要附上单引号,如果查询的ID为一条或者几条,我们手动添加即可,但是如果是几百条.几千条的话,就需要使用一些 ...

  8. 获取Spring的ApplicationContext的几种方式

    Application Context定义 简单来说就是Spring中的高级容器,可以获取容器中的各种bean组件,注册监听事件,加载资源文件等功能. 具体定义可以参考官网:https://sprin ...

  9. 【leetcode 简单】第十四题 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  10. Hie with the Pie（POJ3311+floyd+状压dp+TSP问题dp解法）

    题目链接:http://poj.org/problem?id=3311 题目: 题意:n个城市,每两个城市间都存在距离,问你恰好经过所有城市一遍,最后回到起点(0)的最短距离. 思路:我们首先用flo ...