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- ...
随机推荐
- Ububtu 14.04 安装 Hadoop 2.7.3
1.首先安装java,配置java开发环境 下载jdk:http://www.oracle.com/technetwork/java/javase/archive-139210.html选择你想要下载 ...
- Spark Streaming实战演练
一.spark streaming简介 Streaming是一种数据传输技术,它把客户机收到的数据变成一个稳定连续的流,源源不断的输出,使用户听到的声音和图像十分稳定,而用户在整个文件传输完成开始前就 ...
- 解决秒杀活动高并发出现负库存（Redis）
商城在秒杀活动开始时,同时有好多人来请求这个接口,即便做了判断库存逻辑,也难免防止库存出现超卖,造成损失 Django中的ORM本身就对数据库做了防范,但再过亿级访问也扛不住 下面利用Redis的过载 ...
- Linux下一台服务器Redis主从复制（master-slave）配置
主从概念 ⼀个master可以拥有多个slave,⼀个slave⼜可以拥有多个slave,如此下去,形成了强⼤的多级服务器集群架构 master用来写数据,slave用来读数据,经统计:网站的读写比率 ...
- java八大数据类型
基本数据类型以值传递的方式进行传递,String以值传递的方式传递,其他的以地址的方式进行传递 分别是:byte short int long float double char boole ...
- java框架之SpringBoot(14)-任务
使用 maven 创建 SpringBoot 项目,引入 Web 场景启动器. 异步任务 1.编写异步服务类,注册到 IoC 容器: package zze.springboot.task.servi ...
- 细说@Html.ActionLink()的用法
一.@Html.ActionLink()概述 在MVC的Rasor视图引擎中,微软采用一种全新的方式来表示从前的超链接方式,它代替了从前的繁杂的超链接标签,让代码看起来更加简洁.通过浏览器依然会解析成 ...
- 解决.NET iis初次加载超级慢
禁止证书的验证过程:1.在下面aspnet.config文件中加入下面内容: 32位系统:C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspne ...
- Python实现链表
1.1实现单向链表 #链表结构分成2部分 head,tail #('a',('b',('c',none))) #迭代时候 Head is a ;;;; tail is ('b',('c',none)) ...
- Kubernetes持久化存储2——探究实验
目录贴:Kubernetes学习系列 一.简介 本文在“创建PV,创建PVC挂载PV,创建POD挂载PVC”这个环境的基础上,进行各种删除实验,并记录.分析各资源的状态. 二.实验脚本 实验创建了一个 ...