一、以往的校验都是自己写正则表达式校验，本篇讲的是通过MVC自带的jquery文件进行校验

实现步骤：1. 在webform页面中引入两个jquery文件，10,11行的代码。

  1.  <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Userinfo>" %>
  2.  <%@ Import Namespace="MvcApplication1.Models" %>
  3.  
  4.  <!DOCTYPE html>
  5.  
  6.  <html>
  7.  <head runat="server">
  8.      <meta name="viewport" content="width=device-width" />
  9.      <title>ShowDetail</title>
  10.      <script src="../../Scripts/jquery-1.8.2.min.js"></script>
  11. 11     <script src="../../Scripts/jquery.validate.js"></script>
  12.  </head>
  13.  <body>
  14.  
  15.  </body>
  16.  </html>

2. 在head中添加如下代码：

备注：ready方法指用于在当前文档结构载入完毕后立即执行指定的函数。该函数的作用相当于window.onload事件。

  1.  $().ready(function() {
  2.  // 在键盘按下并释放及提交后验证提交表单
  3.    $("#signupForm").validate({
  4.      rules: {   //规则
  5.        firstname: "required",
  6.        lastname: "required",
  7.        username: {
  8.          required: true,
  9.          minlength: 2
  10.        },
  11.        password: {
  12.          required: true,
  13.          minlength: 5
  14.        },
  15.        confirm_password: {
  16.          required: true,
  17.          minlength: 5,
  18.          equalTo: "#password"   //指fonfirm_password和#password进行对比
  19.        },
  20.        email: {
  21.          required: true,
  22.          email: true
  23.        },
  24.        topic: {
  25.          required: "#newsletter:checked",
  26.          minlength: 2
  27.        },
  28.        agree: "required"
  29.      },
  30.      messages: {   //消息
  31.        firstname: "请输入您的名字",
  32.        lastname: "请输入您的姓氏",
  33.        username: {
  34.          required: "请输入用户名",
  35.          minlength: "用户名必需由两个字母组成"
  36.        },
  37.        password: {
  38.          required: "请输入密码",
  39.          minlength: "密码长度不能小于 5 个字母"
  40.        },
  41.        confirm_password: {
  42.          required: "请输入密码",
  43.          minlength: "密码长度不能小于 5 个字母",
  44.          equalTo: "两次密码输入不一致"
  45.        },
  46.        email: "请输入一个正确的邮箱",
  47.        agree: "请接受我们的声明",
  48.        topic: "请选择两个主题"
  49.       }
  50.      })
  51.  });

二、基础介绍

  1. JQuery Validate使用总结：
  2. 一、导入js库
  3. <script src="../js/jquery.js" type="text/javascript"></script>
  4. <script src="../js/jquery.validate.js" type="text/javascript"></script>
  5.  
  6. 二、默认校验规则
  7. ()required:true               必输字段
  8. ()remote:"check.php"          使用ajax方法调用check.php验证输入值
  9. ()email:true                  必须输入正确格式的电子邮件
  10. ()url:true                    必须输入正确格式的网址
  11. ()date:true                   必须输入正确格式的日期 日期校验ie6出错，慎用
  12. ()dateISO:true                必须输入正确格式的日期(ISO)，例如：--，// 只验证格式，不验证有效性
  13. ()number:true                 必须输入合法的数字(负数，小数)
  14. ()digits:true                 必须输入整数
  15. ()creditcard:                 必须输入合法的信用卡号
  16. ()equalTo:"#field"           输入值必须和#field相同
  17. ()accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
  18. ()maxlength:                输入长度最多是5的字符串(汉字算一个字符)
  19. ()minlength:               输入长度最小是10的字符串(汉字算一个字符)
  20. ()rangelength:[,]         输入长度必须介于  和  之间的字符串")(汉字算一个字符)
  21. ()range:[,]               输入值必须介于  和  之间
  22. ()max:                      输入值不能大于5
  23. ()min:                     输入值不能小于10
  24.  
  25. 三、默认的提示
  26. messages: {
  27.     required: "This field is required.",
  28.     remote: "Please fix this field.",
  29.     email: "Please enter a valid email address.",
  30.     url: "Please enter a valid URL.",
  31.     date: "Please enter a valid date.",
  32.     dateISO: "Please enter a valid date (ISO).",
  33.     dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
  34.     number: "Please enter a valid number.",
  35.     numberDE: "Bitte geben Sie eine Nummer ein.",
  36.     digits: "Please enter only digits",
  37.     creditcard: "Please enter a valid credit card number.",
  38.     equalTo: "Please enter the same value again.",
  39.     accept: "Please enter a value with a valid extension.",
  40.     maxlength: $.validator.format("Please enter no more than {0} characters."),
  41.     minlength: $.validator.format("Please enter at least {0} characters."),
  42.     rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
  43.     range: $.validator.format("Please enter a value between {0} and {1}."),
  44.     max: $.validator.format("Please enter a value less than or equal to {0}."),
  45.     min: $.validator.format("Please enter a value greater than or equal to {0}.")
  46. },
  47. 如需要修改，可在js代码中加入：
  48. jQuery.extend(jQuery.validator.messages, {
  49.         required: "必选字段",
  50.   remote: "请修正该字段",
  51.   email: "请输入正确格式的电子邮件",
  52.   url: "请输入合法的网址",
  53.   date: "请输入合法的日期",
  54.   dateISO: "请输入合法的日期 (ISO).",
  55.   number: "请输入合法的数字",
  56.   digits: "只能输入整数",
  57.   creditcard: "请输入合法的信用卡号",
  58.   equalTo: "请再次输入相同的值",
  59.   accept: "请输入拥有合法后缀名的字符串",
  60.   maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
  61.   minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
  62.   rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
  63.   range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
  64.   max: jQuery.validator.format("请输入一个最大为{0} 的值"),
  65.   min: jQuery.validator.format("请输入一个最小为{0} 的值")
  66. });
  67.  
  68. 推荐做法，将此文件放入messages_cn.js中，在页面中引入
  69. <script src="../js/messages_cn.js" type="text/javascript"></script>
  70.  
  71. 四、使用方式1.将校验规则写到控件中
  72. <script src="../js/jquery.js" type="text/javascript"></script>
  73. <script src="../js/jquery.validate.js" type="text/javascript"></script>
  74. <script src="./js/jquery.metadata.js" type="text/javascript"></script>
  75. $().ready(function() {
  76.  $("#signupForm").validate();
  77. });
  78.  
  79. <form id="signupForm" method="get" action="">
  80.     <p>
  81.         <label for="firstname">Firstname</label>
  82.         <input id="firstname" name="firstname" class="required" />
  83.     </p>
  84.  <p>
  85.   <label for="email">E-Mail</label>
  86.   <input id="email" name="email" class="required email" />
  87.  </p>
  88.  <p>
  89.   <label for="password">Password</label>
  90.   <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
  91.  </p>
  92.  <p>
  93.   <label for="confirm_password">确认密码</label>
  94.   <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
  95.  </p>
  96.     <p>
  97.         <input class="submit" type="submit" value="Submit"/>
  98.     </p>
  99. </form>
  100. 使用class="{}"的方式，必须引入包：jquery.metadata.js
  101. 可以使用如下的方法，修改提示内容：
  102. class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
  103. 在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
  104. class="{required:true,minlength:5,equalTo:'#password'}"
  105.  
  106. .将校验规则写到js代码中
  107. $().ready(function() {
  108.  $("#signupForm").validate({
  109.         rules: {
  110.    firstname: "required",
  111.    email: {
  112.     required: true,
  113.     email: true
  114.    },
  115.    password: {
  116.     required: true,
  117.     minlength:
  118.    },
  119.    confirm_password: {
  120.     required: true,
  121.     minlength: ,
  122.     equalTo: "#password"
  123.    }
  124.   },
  125.         messages: {
  126.    firstname: "请输入姓名",
  127.    email: {
  128.     required: "请输入Email地址",
  129.     email: "请输入正确的email地址"
  130.    },
  131.    password: {
  132.     required: "请输入密码",
  133.     minlength: jQuery.format("密码不能小于{0}个字 符")
  134.    },
  135.    confirm_password: {
  136.     required: "请输入确认密码",
  137.     minlength: "确认密码不能小于5个字符",
  138.     equalTo: "两次输入密码不一致不一致"
  139.    }
  140.   }
  141.     });
  142. });
  143. //messages处，如果某个控件没有message，将调用默认的信息
  144.  
  145. <form id="signupForm" method="get" action="">
  146.     <p>
  147.         <label for="firstname">Firstname</label>
  148.         <input id="firstname" name="firstname" />
  149.     </p>
  150.  <p>
  151.   <label for="email">E-Mail</label>
  152.   <input id="email" name="email" />
  153.  </p>
  154.  <p>
  155.   <label for="password">Password</label>
  156.   <input id="password" name="password" type="password" />
  157.  </p>
  158.  <p>
  159.   <label for="confirm_password">确认密码</label>
  160.   <input id="confirm_password" name="confirm_password" type="password" />
  161.  </p>
  162.     <p>
  163.         <input class="submit" type="submit" value="Submit"/>
  164.     </p>
  165. </form>
  166. required:true 必须有值
  167. required:"#aa:checked"表达式的值为真，则需要验证
  168. required:function(){}返回为真，表时需要验证
  169. 后边两种常用于，表单中需要同时填或不填的元素
  170.  
  171. demo：
  172. $("#form1").validate({//JQ 前端校验
  173.                         rules: {
  174.                         ctl00$MainContent$txtWebName: {
  175.                                 required: true,
  176.                                 maxlength:
  177.                         },
  178.                         ctl00$MainContent$txtShortName: {
  179.                                 maxlength: ,
  180.                                 required: false
  181.                         },
  182.                         ctl00$MainContent$txtKeyWords: {
  183.                                 required: false,
  184.                                 maxlength:
  185.                         },
  186.                         ctl00$MainContent$txtGoodsNo: {
  187.                                 required: false,
  188.                                 maxlength:
  189.                         },
  190.                         ctl00$MainContent$txtRemark: {
  191.                                 required: false,
  192.                                 maxlength:
  193.                         },
  194.                         ctl00$MainContent$txtPageTitle: {
  195.                                 required: true,
  196.                                 maxlength:
  197.                         },
  198.                         ctl00$MainContent$txtMetaKey: {
  199.                                 required: false,
  200.                                 maxlength:
  201.                         },
  202.                         ctl00$MainContent$txtShowUrl: {
  203.                                 required: false,
  204.                                 maxlength: ,
  205.                                 url: true
  206.                         },
  207.                         ctl00$MainContent$txtOtherData: {
  208.                                 required: false,
  209.                                 maxlength:
  210.                         },
  211.                         ctl00$MainContent$txtEC :{ required: true, digits: true},
  212.                         ctl00$MainContent$txtFullEP : {required: true, digits: true},
  213.                         ctl00$MainContent$txtMarketPrice : {required: true, number:true},
  214.                         ctl00$MainContent$txtCash : {required: true,number:true},
  215.                         ctl00$MainContent$txtDurationDays:{required: false,number:true},
  216.                         ctl00$MainContent$txtFullCash:{required: true,number:true}
  217.                         },
  218.                         messages: {
  219.                         ctl00$MainContent$txtWebName: "*请输入商品名[限500字以内]",
  220.                         ctl00$MainContent$txtShortName: "*限500字以内",
  221.                         ctl00$MainContent$txtKeyWords: "*500字以内",
  222.                         ctl00$MainContent$txtGoodsNo: "*250字以内",
  223.                         ctl00$MainContent$txtRemark: "*500字以内",
  224.                         ctl00$MainContent$txtPageTitle: "*请输入分类页面的标题",
  225.                         ctl00$MainContent$txtMetaKey: "*1000字以内",
  226.                         ctl00$MainContent$txtShowUrl: "*请输入正确的URL地址",
  227.                         ctl00$MainContent$txtOtherData: "*1000字以内",
  228.                         ctl00$MainContent$txtEC:"*只能输入整数",
  229.                         ctl00$MainContent$txtFullEP:"*只能输入整数",
  230.                         ctl00$MainContent$txtCash:"*请输入正确的现金数",
  231.                         ctl00$MainContent$txtFullCash:"*请输入正确的现金数",
  232.                         ctl00$MainContent$txtDurationDays:"必须输入数字",
  233.                         ctl00$MainContent$txtMarketPrice:"*请输入正确的市场价格"
  234.                         }
  235.                 }); //validate

具体的相关详细，请参考 http://www.runoob.com/jquery/jquery-plugin-validate.html

  1.  

MVC校验方式【六】的更多相关文章

  1. ASP.NET MVC Model绑定(六)

    ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...

  2. 简单去除exe自校验方式

    简单去除exe自校验方式 一.      自校验定义: 这些程序会检查自己有没有被修改,如果发现被修改的话,便会离开或进行其它动作.基本的校检方法包括 checksum, 检查大小, 检查跳转代码,等 ...

  3. 【spring mvc】spring mvc POST方式接收单个字符串参数，不加注解，接收到的值为null，加上@RequestBody,接收到{"uid":"品牌分类大”}，加上@RequestParam报错 ---- GET方式接收单个参数的方法

    spring mvc POST方式 接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式 接收单个参数,加上@RequestBody,接收到参数格式:{&q ...

  4. 2017.3.31 spring mvc教程（六）转发、重定向、ajax请求

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  5. springboot使用hibernate validator校验方式

    一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要 ...

  6. Struts 2 数据校验要用到的类和两种校验方式以及一些校验问题的解决

    通过继承ActionSupport类来完成Action开发,ActionSupport类不仅对Action接口进行简单实现, 同时增加了验证.本地化等支持 .真实开发中自定义Action都需要继承该类 ...

  7. MVC传值方式及优缺点

    说在前面文章转自 http://www.cxyclub.cn/n/49493/ 在MVC控件器传递多个Model到视图,使用ViewData,ViewBag,部分视图,TempData,ViewMod ...

  8. MVC 校验

    校验保障了MVC 应用程序安全性. Models 文件夹包含表示应用程序模型的类 1,创建一个项目MvcValidateDemo. 2,创建一个实体类UserInfo在Models中,包含Id.Use ...

  9. junit4测试 Spring MVC注解方式

    本人使用的为junit4进行测试 spring-servlet.xml中使用的为注解扫描的方式 <?xml version="1.0" encoding="UTF- ...

随机推荐

  1. ionic3 创建项目至apk打包全过程教程

    主要流程: 安装node.js  -->  安装jdk  -->  安装AndroidSDK  -->  安装cordova  -->  安装ionic -->  创建项 ...

  2. 项目实战02：nginx 反向代理负载均衡、动静分离和缓存的实现

    目录 实验一:实现反向代理负载均衡且动静分离 1.环境准备: 2.下载编译安装tengine 3.设置代理服务器的配置文件 4.启动tengine服务 5.开启后端的web服务 6.测试 实验二:ng ...

  3. 移动前端开发和 Web 前端开发的区别

    http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...

  4. CFGym101138D Strange Queries 莫队/分块

    正解:莫队/分块 解题报告: 传送门 ummm这题耗了我一天差不多然后我到现在还没做完:D 而同机房的大佬用了一个小时没有就切了?大概这就是大佬和弱鸡的差距趴QAQ 然后只是大概写下思想好了因为代码我 ...

  5. git：当本地分支中的代码和develop分支上有很多冲突，希望删掉本地分支，重新建立新的分支，怎么解决？

    git:当本地分支中的代码和develop分支上有很多冲突,希望删掉本地分支,重新建立新的分支,但是git中说你需要先解决当前的冲突,这种情况怎么解决 这种情况可以在代码编辑器中点击commit,然后 ...

  6. Cartographer源码阅读(8)：imu_tracker

    IMU的输入为imu_linear_acceleration 和  imu_angular_velocity 线加速和角速度.最终作为属性输出的是方位四元数.  Eigen::Quaterniond ...

  7. ionic 需要注意的知识点

  8. 使用COE脚本绑定SQL Profile

    日常运维中,经常会遇到需要绑定好的执行计划的场景. 简单来说,就是将一个sql_id绑定好的plan_hash_value.如果没有使用到绑定变量,还需要把force_match设置为true. 用到 ...

  9. 细说@Html.ActionLink()的用法

    一.@Html.ActionLink()概述 在MVC的Rasor视图引擎中,微软采用一种全新的方式来表示从前的超链接方式,它代替了从前的繁杂的超链接标签,让代码看起来更加简洁.通过浏览器依然会解析成 ...

  10. C#设计模式(10)——组合模式（Composite Pattern）（转）

    一.引言 在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...