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- ...
随机推荐
- 实时分析（在线查询）,firehose---clickhouse
firehose---clickhouse 在Hive中适不适合像传统数据仓库一样利用维度建模hive新功能 Cube, Rollup介绍https://blog.csdn.net/moon_yang ...
- 更新node的版本，node没有安装到c盘，安装到了D盘
百度的很久,只有这一个实用,记录一下 https://www.cnblogs.com/xinjie-just/p/7061619.html
- EntityFreamWork 项目总结
前段时间一直在忙着处理一个B2C的商城项目,未来得整理这次项目的心得,今天偶有空闲便写下这篇文章以记录整个项目的设计及自我总结. 这个项目是我综合传智播客教学基础将传统三层架构与EntityFrame ...
- spring datasource 使用 proxool
XmlWebApplicationContext使用的xml配置如下: <?xml version="1.0" encoding="UTF-8"?> ...
- 安装和使用ZFS
一.安装和使用ZFS Centos7上安装和使用ZFS:https://blog.csdn.net/linuxnews/article/details/51286358
- 常用Git命令清单。
上期传送门:[清单]7个管理和优化网站资源的工具 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository: ...
- 关于Oracle 10.2.0.5 版本应用SCN补丁14121009相关问题
环境:OEL 5.7 + Oracle 10.2.0.5 背景:Oracle发布的两篇关于2019年6月份将自动调整高版本数据库的SCN COMPATIBILITY的MOS文章引起了很多客户的恐慌,尤 ...
- 使用Navicat定时备份mysql数据库和创建报表并邮件自动发送
数据库备份在现代计算机高速发展的今日变得日益重要,程序员往往因为不重视而忽略备份数据,导致数据丢失,造成非常严重的后果.定时备份无疑是解决备份的最好的途径,本文主要使用Navicat来自动备份数据库和 ...
- 关于NFS服务器权限的四种情况
第一种:service 和client 的UID和用户名一样 client按照service端的权限来使用.
- sublime设置tab为四个空格
在首选项->设置里: 添加: "tab_size": 4, "translate_tabs_to_spaces": true,