jquery.validate.js客户端验证
参考:http://www.runoob.com/jquery/jquery-plugin-validate.html
http://www.cnblogs.com/artech/archive/2012/06/17/client-validation-01.html
引用文件:
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
Jquery代码:
$(document).ready(function () {
$("form").validate();
});
Html代码:
@using (Html.BeginForm("AddSave", "ArticlesInfo", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
{
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px">标题</td>
<td>
@Html.TextBoxFor(model => model.Title, new { @class = "boxtext required" })
</td>
</tr>
<tr>
<td style="width: 100px">配图</td>
<td>
<input type="file" name="Img" class="boxtext required" />
</td>
</tr>
<tr>
<td style="width: 100px">内容</td>
<td>
@Html.TextAreaFor(model => model.Contents, new { cols = "50", rows = "20", sign = "Contents", @class= "required" })
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="保存" class="boxbut" />
</td>
</tr>
</table>
}
自定义规则和错误消息
$(document).ready(function () {
$("form").validate({
rules: {
Title: { required: true },
Img: { required: true }
}, messages: {
Title: { required: "请输入标题" },
Img: { required: "请选择图片" }
}
});
});
默认校验规则:
序号 | 规则 | 描述 |
---|---|---|
1 | required:true | 必须输入的字段。 |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
6 | dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 |
7 | number:true | 必须输入合法的数字(负数,小数)。 |
8 | digits:true | 必须输入整数。 |
9 | creditcard: | 必须输入合法的信用卡号。 |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
16 | max:5 | 输入值不能大于 5。 |
17 | min:10 | 输入值不能小于 10。 |
jquery.validate.js客户端验证的更多相关文章
- (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- 解决jquery.validate.js的验证bug
版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7 问题: a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成 ...
- jquery.validate.js 无法验证隐藏域
隐藏域中的字段无法验证解决办法 修改 jquery.validate.js 中的 ignore: ":hidden",
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
随机推荐
- 搭建基于hyperledger fabric的联盟社区(八) --Fabric证书解析
一.证书目录解析 通过cryptogen生成所有证书文件后,以peerOrgannizations的第一个组织树org1为例,每个目录和对应文件的功能如下: ca: 存放组织的根证书和对应的私 ...
- 常见企业IT支撑【8、端口回流问题】
端口回流故障场景,常见于内网启用了Server服务器,使用出口路由设备的外网口NAT映射了一个公网地址,域内内网主机访问了这个公网地址,访问不通. 故障容易出现在办公网内的带有对外Server测试环境 ...
- 谈谈GPU与FPGA的一些看法
从几个方面来介绍一下GPU和FPGA. 从峰值性能来说,GPU(10Tflops)远远高于FPGA(<1TFlops).GPU上面成千上万个core同时跑在GHz的频率上还是非常壮观的,最新的G ...
- HDOJ5521(巧妙构建完全图)
Meeting Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...
- Apache的下载安装(主要说的 64位)及问题
本文转载自:http://blog.csdn.net/qq_15096707/article/details/47319545 今天重装完win10系统,就重新下载安装 Apache.虽说之前有安装过 ...
- 20165226 2017-2018-4 《Java程序设计》第7周学习总结
20165226 2017-2018-4 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章 JDBC与MySQL数据库 下载MySQL最新版本. 连接数据库 下载JDBC-M ...
- 【UVa】1374 Power Calculus(IDA*)
题目 题目 分析 IDA*大法好,抄了lrj代码. 代码 #include <cstdio> #include <cstring> #include <a ...
- Web App、Hybrid App与Native App的设计差异
目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...
- 详解华为交换机iStack特性
iStack特性的产品支持 iStack也就是我们平时所说的“堆叠”,但是华为交换机的iStack功能与其他厂商的交换机堆叠功能相比又有许多不同.在最新的Sx700大系中,只有S2700.S3700. ...
- canvas绘制矩形
canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...