[转]MVC+JQuery validate实现用户输入验证
本文转自:http://www.cnblogs.com/ahui/archive/2010/10/08/1845677.html
MVC服务器端:
1.在controller中验证用户输入,如果验证失败,执行
ModelState.AddModelError("LoginName", Resource.LoginName + Resource.WordSpace + Resource.CanNotBeBlank);
2.在View视图某一个地方放置
<%=Html.ValidationSummary()%>
JS客户端:
1.引放相应的JS文件
<script src="/Js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/Js/jquery.validate.js" type="text/javascript"></script>
2.在View视图某一个地方放置
<label id="messageBox"></label>
3.以常规的submit()方式提交,在页面最下面加入以下JS代码
$(function() {
$("#form1").validate({
rules: {
LoginName: { required: true, regex: "^[0-9]+$" }
},
messages: {
LoginName: "<%=Resource.LoginName + Resource.WordSpace + Resource.CanNotBeBlank%>"
},
errorLabelContainer: "#messageBox",
wrapper: "li"
});
});
4.以Ajax方式提交到服务器的,JS代码要改为:
var validate = null;
var opts = {
rules: {
LoginName: { required: true, regex: "^[a-zA-Z][a-zA-Z0-9._-]{3,20}$" }
},
messages: {
LoginName: "请输入正确的登陆名"
},
errorLabelContainer: "#messageBox",
wrapper: "li"
}; function checkForm() {
var b = validate.checkForm();
validate.showErrors();
return b;
} $(function () {
validate = $("#form1").validate(opts);
}); function SaveUser() {
if (!checkForm()) {
return;
}
//...........
}
要支持regex方式的验证,请在jquery.validate.js加入:
// 正则表达式
$.validator.addMethod(
"regex",
function (value, element, regexp) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
以上代码已实现双语化提示
其它常用的验证方式有:
required, remote, minlength, maxlength, rangelength, min, max, range, email, url, date, dateISO, number, digits, creditcard, accept, equalTo等
可参见:
http://docs.jquery.com/Plugins/Validation/validate
[转]MVC+JQuery validate实现用户输入验证的更多相关文章
- MVC笔记2:mvc+jquery.validate.js 进行前端验证
1.引用如下js和css 代码 <link href="@Url.Content("~/Content/Site.css")" rel="sty ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 360浏览器下jquery.validate.unobtrusive的日期验证问题
今天在招聘频道(job.cnblogs.com)遭遇这样一个问题——在360浏览器下,在一个表单验证中,虽然输入了有效的日期,却总是提示日期格式错误,见下图: 而在Chrome/Safari/Fire ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
随机推荐
- 「Luogu 1471」 方差
题目背景 滚粗了的HansBug在收拾旧数学书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. 输入输出 ...
- Javascript判断两个点(经纬度)的距离,以及是否在某个区域内(经纬度字符串)
JS计算两个点(经纬度)的距离 function getGreatCircleDistance(lat1, lng1, lat2, lng2) { var EARTH_RADIUS = 6378137 ...
- Xamarin如何使用终端设备的NFC功能传递卡号等信息给Web页面(Android)
一.前提条件,App必须具有NFC权限. 二.项目中加入监控类NFCCatchActivity.cs [Activity(Label = "NFCCatch",Theme = &q ...
- 使用django进行发送 邮件
我们来看一下 django发送 邮件的整个流程 第一步:例先去 网易163注册账号并激活发邮件功能 把授权码进行 开启 来到我们的项目setting中进行 一个配置: # 邮箱的配置信息 EMAIL_ ...
- Scala详细环境安装与配置
https://blog.csdn.net/free356/article/details/72911898 系统为windows.安装配置Scala如下: 一,安装Scala 1,java6以上(建 ...
- TFS解锁命令
tf undo /server:http://193.100.100.29:8080/tfs/EGSS /workspace:HY-PC;hy $/CTCS/TSAGS_TEAM/TestHY ...
- select展开时 重新加载 option,ie 折叠问题 以及 chrome 没有变化问题
这个bug是因为浏览器的渲染问题引起的 一:重新加载option的渲染处理 1:火狐能重新渲染,并且select不折叠 2:ie重新渲染,但是select收缩折叠 3:chrome直接不重新进行渲染, ...
- Python实现KNN算法
Python实现Knn算法 关键词:KNN.K-近邻(KNN)算法.欧氏距离.曼哈顿距离 KNN是通过测量不同特征值之间的距离进行分类.它的的思路是:如果一个样本在特征空间中的k个最相似(即特征空间 ...
- SDUT OJ 数组计算机(线段树)
学长推荐了这个博客详细的介绍了线段树的建立.查找.更新: 数组计算机 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Prob ...
- SDUT OJ 数据结构实验之串三:KMP应用
数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...