参考: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客户端验证的更多相关文章

  1. (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  2. [jQuery]使用jQuery.Validate进行客户端验证(初级篇)

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  3. 解决jquery.validate.js的验证bug

    版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7 问题: a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成 ...

  4. jquery.validate.js 无法验证隐藏域

    隐藏域中的字段无法验证解决办法 修改 jquery.validate.js 中的 ignore: ":hidden",

  5. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  6. jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  7. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  8. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  9. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

随机推荐

  1. Kafka之sync、async以及oneway

    kafka有同步(sync).异步(async)以及oneway这三种发送方式,某些概念上区分也可以分为同步和异步两种,同步和异步的发送方式通过“producer.type”参数指定,而oneway由 ...

  2. C# WMP 视频播放

    1. C#播放器控件常用的方法介绍 右击工具箱->选择项(I)... -> 显示"选择工具箱项" -> COM组件 -> Windows Media Pla ...

  3. MOSS 2013研究系列---Win2008R2 建立域控时候,报密码不符合要求解决办法

    今天远程给Win2008R2装AD域控的时候,突然报如下的错误页面: 修改了密码,将密码强度设置复杂了,但是,仍然会弹出这个错误页面,估计是因为远程账号的关系,于是再网上搜下了一下,找到了一个解决方案 ...

  4. Unit01: Spring简介 、 Spring容器 、 Spring IOC

    Unit01: Spring简介 . Spring容器 . Spring IOC Spring (1)Spring是什么? Spring是一个开源的用来简化应用开发的框架. (2)Spring的特点? ...

  5. 基于STL优先队列和邻接表的dijkstra算法

    首先说下STL优先队列的局限性,那就是只提供入队.出队.取得队首元素的值的功能,而dijkstra算法的堆优化需要能够随机访问队列中某个节点(来更新源点节点的最短距离). 看似可以用vector配合m ...

  6. 干净的 js测试页面

    <!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8&quo ...

  7. FPGA时序约束一点总结

    时序约束的一点总结. 打拍.掌握好时序. 手动分配位置,这个不是一定有效. 打破层级或者物理综合,或者自动加流水等综合优化参数调整. 根据实际情况使用异步时钟策略. 换速度更快的片子. 最也进接手一个 ...

  8. Netty--使用TCP协议传输文件

    简介: 用于将文件通过TCP协议传输到另一台机器,两台机器需要通过网络互联. 实现: 使用Netty进行文件传输,服务端读取文件并将文件拆分为多个数据块发送,接收端接收数据块,并按顺序将数据写入文件. ...

  9. Appium+python自动化27-等待activity出现(android特有的wait_activity)

    前言 在启动app的时候,如果直接做下一步点击操作,经常会报错,于是我们会在启动完成的时候加sleep. 那么问题来了,这个sleep时间到底设置多少合适呢?设置长了,就浪费时间,设置短了,就会找不到 ...

  10. Vue踩坑记录册

    1.vue-cli+webpack项目 修改项目名称 解决办法: 1 删除 node_modules 文件夹(如果修改项目名称,需要在在package.json中修改对应的name) 2 重新安装依赖 ...