MVC校验方式【六】

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

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

 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Userinfo>" %>

 <%@ Import Namespace="MvcApplication1.Models" %>

 <!DOCTYPE html>

 <html>

 <head runat="server">

     <meta name="viewport" content="width=device-width" />

     <title>ShowDetail</title>

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

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

 </head>

 <body>

 </body>

 </html>

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

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

 $().ready(function() {

 // 在键盘按下并释放及提交后验证提交表单

   $("#signupForm").validate({

     rules: {   //规则

       firstname: "required",

       lastname: "required",

       username: {

         required: true,

         minlength: 2

       },

       password: {

         required: true,

         minlength: 5

       },

       confirm_password: {

         required: true,

         minlength: 5,

         equalTo: "#password"   //指fonfirm_password和#password进行对比

       },

       email: {

         required: true,

         email: true

       },

       topic: {

         required: "#newsletter:checked",

         minlength: 2

       },

       agree: "required"

     },

     messages: {   //消息

       firstname: "请输入您的名字",

       lastname: "请输入您的姓氏",

       username: {

         required: "请输入用户名",

         minlength: "用户名必需由两个字母组成"

       },

       password: {

         required: "请输入密码",

         minlength: "密码长度不能小于 5 个字母"

       },

       confirm_password: {

         required: "请输入密码",

         minlength: "密码长度不能小于 5 个字母",

         equalTo: "两次密码输入不一致"

       },

       email: "请输入一个正确的邮箱",

       agree: "请接受我们的声明",

       topic: "请选择两个主题"

      }

     })

 });

二、基础介绍

JQuery Validate使用总结：

一、导入js库

<script src="../js/jquery.js" type="text/javascript"></script>

<script src="../js/jquery.validate.js" type="text/javascript"></script>

二、默认校验规则

()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:                输入长度最多是5的字符串(汉字算一个字符)

()minlength:               输入长度最小是10的字符串(汉字算一个字符)

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

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

()max:                      输入值不能大于5

()min:                     输入值不能小于10

三、默认的提示

messages: {

    required: "This field is required.",

    remote: "Please fix this field.",

    email: "Please enter a valid email address.",

    url: "Please enter a valid URL.",

    date: "Please enter a valid date.",

    dateISO: "Please enter a valid date (ISO).",

    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",

    number: "Please enter a valid number.",

    numberDE: "Bitte geben Sie eine Nummer ein.",

    digits: "Please enter only digits",

    creditcard: "Please enter a valid credit card number.",

    equalTo: "Please enter the same value again.",

    accept: "Please enter a value with a valid extension.",

    maxlength: $.validator.format("Please enter no more than {0} characters."),

    minlength: $.validator.format("Please enter at least {0} characters."),

    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),

    range: $.validator.format("Please enter a value between {0} and {1}."),

    max: $.validator.format("Please enter a value less than or equal to {0}."),

    min: $.validator.format("Please enter a value greater than or equal to {0}.")

},

如需要修改，可在js代码中加入：

jQuery.extend(jQuery.validator.messages, {

        required: "必选字段",

  remote: "请修正该字段",

  email: "请输入正确格式的电子邮件",

  url: "请输入合法的网址",

  date: "请输入合法的日期",

  dateISO: "请输入合法的日期 (ISO).",

  number: "请输入合法的数字",

  digits: "只能输入整数",

  creditcard: "请输入合法的信用卡号",

  equalTo: "请再次输入相同的值",

  accept: "请输入拥有合法后缀名的字符串",

  maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),

  minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),

  rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),

  range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

  max: jQuery.validator.format("请输入一个最大为{0} 的值"),

  min: jQuery.validator.format("请输入一个最小为{0} 的值")

});

推荐做法，将此文件放入messages_cn.js中，在页面中引入

<script src="../js/messages_cn.js" type="text/javascript"></script>

四、使用方式1.将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>

<script src="../js/jquery.validate.js" type="text/javascript"></script>

<script src="./js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {

 $("#signupForm").validate();

});

<form id="signupForm" method="get" action="">

    <p>

        <label for="firstname">Firstname</label>

        <input id="firstname" name="firstname" class="required" />

    </p>

 <p>

  <label for="email">E-Mail</label>

  <input id="email" name="email" class="required email" />

 </p>

 <p>

  <label for="password">Password</label>

  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />

 </p>

 <p>

  <label for="confirm_password">确认密码</label>

  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />

 </p>

    <p>

        <input class="submit" type="submit" value="Submit"/>

    </p>

</form>

使用class="{}"的方式，必须引入包：jquery.metadata.js

可以使用如下的方法，修改提示内容：

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

class="{required:true,minlength:5,equalTo:'#password'}"

.将校验规则写到js代码中

$().ready(function() {

 $("#signupForm").validate({

        rules: {

   firstname: "required",

   email: {

    required: true,

    email: true

   },

   password: {

    required: true,

    minlength:

   },

   confirm_password: {

    required: true,

    minlength: ,

    equalTo: "#password"

   }

  },

        messages: {

   firstname: "请输入姓名",

   email: {

    required: "请输入Email地址",

    email: "请输入正确的email地址"

   },

   password: {

    required: "请输入密码",

    minlength: jQuery.format("密码不能小于{0}个字 符")

   },

   confirm_password: {

    required: "请输入确认密码",

    minlength: "确认密码不能小于5个字符",

    equalTo: "两次输入密码不一致不一致"

   }

  }

    });

});

//messages处，如果某个控件没有message，将调用默认的信息

<form id="signupForm" method="get" action="">

    <p>

        <label for="firstname">Firstname</label>

        <input id="firstname" name="firstname" />

    </p>

 <p>

  <label for="email">E-Mail</label>

  <input id="email" name="email" />

 </p>

 <p>

  <label for="password">Password</label>

  <input id="password" name="password" type="password" />

 </p>

 <p>

  <label for="confirm_password">确认密码</label>

  <input id="confirm_password" name="confirm_password" type="password" />

 </p>

    <p>

        <input class="submit" type="submit" value="Submit"/>

    </p>

</form>

required:true 必须有值

required:"#aa:checked"表达式的值为真，则需要验证

required:function(){}返回为真，表时需要验证

后边两种常用于，表单中需要同时填或不填的元素

demo：

$("#form1").validate({//JQ 前端校验

                        rules: {

                        ctl00$MainContent$txtWebName: {

                                required: true,

                                maxlength:

                        },

                        ctl00$MainContent$txtShortName: {

                                maxlength: ,

                                required: false

                        },

                        ctl00$MainContent$txtKeyWords: {

                                required: false,

                                maxlength:

                        },

                        ctl00$MainContent$txtGoodsNo: {

                                required: false,

                                maxlength:

                        },

                        ctl00$MainContent$txtRemark: {

                                required: false,

                                maxlength:

                        },

                        ctl00$MainContent$txtPageTitle: {

                                required: true,

                                maxlength:

                        },

                        ctl00$MainContent$txtMetaKey: {

                                required: false,

                                maxlength:

                        },

                        ctl00$MainContent$txtShowUrl: {

                                required: false,

                                maxlength: ,

                                url: true

                        },

                        ctl00$MainContent$txtOtherData: {

                                required: false,

                                maxlength:

                        },

                        ctl00$MainContent$txtEC :{ required: true, digits: true},

                        ctl00$MainContent$txtFullEP : {required: true, digits: true},

                        ctl00$MainContent$txtMarketPrice : {required: true, number:true},

                        ctl00$MainContent$txtCash : {required: true,number:true},

                        ctl00$MainContent$txtDurationDays:{required: false,number:true},

                        ctl00$MainContent$txtFullCash:{required: true,number:true}

                        },

                        messages: {

                        ctl00$MainContent$txtWebName: "*请输入商品名[限500字以内]",

                        ctl00$MainContent$txtShortName: "*限500字以内",

                        ctl00$MainContent$txtKeyWords: "*500字以内",

                        ctl00$MainContent$txtGoodsNo: "*250字以内",

                        ctl00$MainContent$txtRemark: "*500字以内",

                        ctl00$MainContent$txtPageTitle: "*请输入分类页面的标题",

                        ctl00$MainContent$txtMetaKey: "*1000字以内",

                        ctl00$MainContent$txtShowUrl: "*请输入正确的URL地址",

                        ctl00$MainContent$txtOtherData: "*1000字以内",

                        ctl00$MainContent$txtEC:"*只能输入整数",

                        ctl00$MainContent$txtFullEP:"*只能输入整数",

                        ctl00$MainContent$txtCash:"*请输入正确的现金数",

                        ctl00$MainContent$txtFullCash:"*请输入正确的现金数",

                        ctl00$MainContent$txtDurationDays:"必须输入数字",

                        ctl00$MainContent$txtMarketPrice:"*请输入正确的市场价格"

                        }

                }); //validate

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

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

ASP.NET MVC Model绑定(六)
ASP.NET MVC Model绑定(六) 前言前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...
简单去除exe自校验方式
简单去除exe自校验方式一. 自校验定义: 这些程序会检查自己有没有被修改,如果发现被修改的话,便会离开或进行其它动作.基本的校检方法包括 checksum, 检查大小, 检查跳转代码,等 ...
【spring mvc】spring mvc POST方式接收单个字符串参数，不加注解，接收到的值为null，加上@RequestBody,接收到{"uid":"品牌分类大”}，加上@RequestParam报错 ---- GET方式接收单个参数的方法
spring mvc POST方式接收单个参数,不加任何注解,参数名对应,接收到的值为null spring mvc POST方式接收单个参数,加上@RequestBody,接收到参数格式:{&q ...
2017.3.31 spring mvc教程（六）转发、重定向、ajax请求
学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...
springboot使用hibernate validator校验方式
一.参数校验在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动方法内代码显得冗长每次要 ...
Struts 2 数据校验要用到的类和两种校验方式以及一些校验问题的解决
通过继承ActionSupport类来完成Action开发,ActionSupport类不仅对Action接口进行简单实现, 同时增加了验证.本地化等支持 .真实开发中自定义Action都需要继承该类 ...
MVC传值方式及优缺点
说在前面文章转自 http://www.cxyclub.cn/n/49493/ 在MVC控件器传递多个Model到视图,使用ViewData,ViewBag,部分视图,TempData,ViewMod ...
MVC 校验
校验保障了MVC 应用程序安全性. Models 文件夹包含表示应用程序模型的类 1,创建一个项目MvcValidateDemo. 2,创建一个实体类UserInfo在Models中,包含Id.Use ...
junit4测试 Spring MVC注解方式
本人使用的为junit4进行测试 spring-servlet.xml中使用的为注解扫描的方式 <?xml version="1.0" encoding="UTF- ...

随机推荐

css的position,float属性的理解
我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...
String字面量
public class assa{ static String ee = "aa";//ee指向常量池中的aa static String ff = new String(&qu ...
WdatePicker日历添加事件，在任意月改变时处理日期事件
原由在做系统时根据要求有时候需要屏蔽掉某些特殊的日期,像周日或者法定假日,以及一些调班的日期:使用WdatePicker可以屏蔽掉周日和大多数法定假日,但像清明或者调班的日期则不好处理. 想法 1: ...
[Day8] eclipse
快捷键 1.内容辅助键 Alt+/ 2.格式化Ctrl+Shift+f 代码区域右键 -- Source – Format 3. 自动导包: Ctrl+Shift+o 如果当前类在多个包中都存在,这 ...
部署WEB项目到服务器（三）安装mysql到linux服务器（Ubuntu）详解
突发奇想,想在自己电脑上部署一个web网站. 1,首先是下载一个适合自己已安装服务器版本的mysql数据库. 这里使用网上的链接http://dev.mysql.com/downloads/mysql ...
深入浅出Vue基于“依赖收集”的响应式原理（转）
add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...
文件上传下下载（不包含断点续传） Excel，Word导入导出基础
1.文件上传下载(MVC应用) 视图:form表单,编码方式为multipart/form-data <body> <div> <form action="/D ...
MTSC2019第五届中国移动互联网测试开发大会北京站震撼来袭！
MTSC2019 暨第五届中国移动互联网测试开发大会(Mobile Testing Summit China)是由国内最大的测试开发技术社区之一 TesterHome 发起的行业会议,聚焦于软件测试及 ...
SQLite multiple threads
const int loops = 1000; public void DatabaseThreadSafetyTest() { var backgroundThread = new Thread(n ...
ZooKeeper是什么
ZooKeeper概念相信大家对 ZooKeeper 应该不算陌生,但是你真的了解 ZooKeeper 是什么吗?如果别人/面试官让你讲讲 ZooKeeper 是什么,你能回答到哪个地步呢? 本人曾 ...

MVC校验方式【六】

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

随机推荐

热门专题