[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 ...
随机推荐
- 在Eclipse中使用Propertites Editor插件来解决property文件中文显示乱码
在一般情况下,propertites文件在eclipse中的显示中文一直显示乱码,想要解决这个问题,需要通过在eclipse中安装一个Propertites Editor插件来进行解决. 在Eclip ...
- CDATA
1DTD中的属性类型 全名:character data 在标记CDATA下,所有的标记.实体引用都被忽略,而被XML处理程序一视同仁地当做字符数据看待,CDATA的形式如下: <![CDATA ...
- C语言关键字register、extern、static
C语言中: 一.register变量 关键字regiter请求编译器尽可能的将变量存在CPU的寄存器中.有以下几点注意的地方. register变量必须是能被CPU寄存器所接受的类型,这通常意味着re ...
- LightOj 1096 - nth Term (矩阵快速幂,简单)
题目 这道题是很简单的矩阵快速幂,可惜,在队内比赛时我不知什么时候抽风把模版中二分时判断的 ==1改成了==0 ,明明觉得自己想得没错,却一直过不了案例,唉,苦逼的比赛状态真让人抓狂!!! #incl ...
- **json_encode:让Json更懂中文(JSON_UNESCAPED_UNICODE)
我们知道, 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式, 还会在一定程度上增加传输的数据量. 代码如下: <?php echo ...
- VNC Server 配置
1. 检查vnc客户端和服务器是否已经安装: [gavin@centos ~]$ rpm -q vnc vnc-server package vnc is not installed vnc-serv ...
- Session过期,跳出iframe等框架
//在你想控制跳转的页面,如login.jsp中的<head>与</head>之间加入以下代码: if(window != top){ //解决Sessio ...
- pymongo 例子
import pymongo class dbUtil(object): def __init__(self, tablename='functional_testing'): con = pymon ...
- Quartz所使用的表的说明
Quartz将Job保存在数据库中所需表的说明 QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron T ...
- 用Telnet发送HTTP请求
1. 进入cmd命令环境 2. 输入"telnet www.baidu.com 80" 3. 利用快捷键"Ctrl+](右中括号)"来打开本地回显功能 (注本阶 ...