[ASP.NET 技术点滴] Jquery 前端验证
先上HTML代码:
<form id="login" name="login" action="~/f_login/Login" method="post">
用户名:<input name="cuName" type="text" value="用户名/手机号"
onfocus="if (value == '用户名/手机号') { value = '' }"
onblur="if (value == '') { value = '用户名/手机号' }" /><br />
密码:<input name="cPwd" type="password"><br /> 验证码:<input type="text" id="valText" name="code" />
<img alt="验证码" id="validimg" src="@Url.Action("CreateImage","ValidationCode")" /> <br />
<input type="submit" id="flogin" value="登录" />
<input type="reset" id="flogin" value="取消" />
</form>
再上Jquery代码:
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form").validate({
rules :{
cuNmae : { required: true },
cPwd: { required: true },
code: {required:true}
//birhthDate :{required: true, date: true},
//blogAddress :{url: true},
//emailAddress:{required: true, email: true}
},
messages: {
cuName: { required: "请输入姓名" },
cPwd: { required: "请输入密码" },
code: {required:"请输入验证码"}
//birhthDate :{ required: "请输入出生日期", date: "请输入一个合法的日期"},
//blogAddress :{ url: "请输入一个合法的URL" },
//emailAddress:{ required: "请输入Email地址", email: "请输入一个合法的Email地址"}
}
});
});
</script>
注意点:
1.页面中的Jquery库不能重复包含,否则出错不生效;
2.jquery库必须添加到$("form").validate()方法之前,否则不生效;
3.验证规则和input控件中的name属性相对应。
4.本例子主要展示的是required规则,即不可为空,其它规则请查看jquery.validate.js文档
参考资料:《asp.net mvc 4 框架揭秘》 蒋金楠著
[ASP.NET 技术点滴] Jquery 前端验证的更多相关文章
- 简单的jQuery前端验证码校验
简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...
- jQuery前端验证多种方式
JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript&quo ...
- jquery前端验证框架
1.validationEngine.jquery.css 样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...
- ASP.Net中通过Jquery前端对Repeater控件绑定的数据进行操作
说明:由于Repeater控件是动态绑定,通过Id获取数据只能默认获取第一行: 1.对Repeater中div设置样式 2.通过$(".css").each(function(){ ...
- ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后
ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...
- ASP.NET MVC5中的Model验证
Model验证是ASP.NET MVC中的重要部分,它主要用于判断输入的数据类型及值是否符合我们设定的规则,这篇文章就介绍下ASP.NET MVC中Model验证的几种方式. 后台验证 DataAnn ...
- Javascript配合jQuery实现流畅的前端验证
做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...
- ASP.NET MVC的客户端验证:jQuery的验证
之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解W ...
- jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...
随机推荐
- android编程常见问题-程序真机中不显示
新手编程常见问题: 问题表现:连接上手机后,程序不显示 解决版本:检查AndroidManifest.xml 文件中SDK版本的设置(要求要兼容当前手机版本系统),如下:
- DevExpress控件使用系列--ASPxTreeList
控件功能 结合列表控件及树控件的优点,在列表控件中实现类型树的多层级操作 官方说明 http://documentation.devexpress.com/#AspNet/clsDevExpres ...
- [转载]c# OpenFileDialog
string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog(); ...
- asynDBcenter(复习)
asynDBCenter asynDBCenter是GS和DBCenter之间的模块,有了他GS访问数据库就是异步的了,以前是同步的,加入某个操作很耗时那么GS就在那等待这个返回值. .对于std:: ...
- JavaScript高级---门面模式设计
门面模式 两个作用: 1.简化类的接口 2.消除类与使用它的客户代码之间的耦合 门面模式常常是开发人员最亲密的朋友.它几乎是所有javascript库的核心原则 门面模式的目的是为了让开发人员用更简单 ...
- PHP中如何给日期加上一个月 加一周 加一天
echo date("Y-m-d",strtotime("+1 month",strtotime("2012-02-04"))); 结果 ...
- ajax post 跨域
H5页面永远无法避开跨域问题-- php中, header('Access-Control-Allow-Origin:*'); 搞定. 兼容性先不管了. 来自为知笔记(Wiz)
- json 基础
json格式 JSON格式:http://www.json.org/ python和JSON的关系请参考:http://docs.python.org/library/json.html JSON建构 ...
- Spring Boot——2分钟构建spring web mvc REST风格HelloWorld
之前有一篇<5分钟构建spring web mvc REST风格HelloWorld>介绍了普通方式开发spring web mvc web service.接下来看看使用spring b ...
- POJ 1125 Stockbroker Grapevine(floyd)
http://poj.org/problem?id=1125 题意 : 就是说想要在股票经纪人中传播谣言,先告诉一个人,然后让他传播给其他所有的经纪人,需要输出的是从谁开始传播需要的时间最短,输出这个 ...