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。
时间: 2024-10-12 19:40:10

jquery.validate.js客户端验证的相关文章

解决jquery.validate.js的验证bug

版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7 问题: a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成空白的[原来的默认提示没了] b.必填选项,如手机号码直接复制进去,格式是对的,验证label是不变的 1.母版页 $(function () { $.validator.setDefaults({ errorClass: "tip-error", errorPlacement: func

解决jquery.validate.js的验证bug[续]

版本提示:jq为1.9.1, jquery.validate 为jQuery Validation Plugin 1.9.0,jquery.validate.unobtrusive.js,使用Model验证 问题: 当第一次页面加载时,直接删除必填字段的文本框内容,不会提示错误信息[猜测:未初始化] 代码: $.extend($.validator, { defaults: { onfocusout: function (element, event) { if (element.value =

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

jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏览器当中却无法进行验证就直接将表单提交了. 在网上查了一下原因,大多数文章表明原因是js代码书写不规范造成,也就是在验证表单的规则(rules)数组的最后多了个逗号.起初我也因为是这个原因于是查看了自己的代码发现确实有此问题于是就改正过来了. 但是在浏览器中查看后仍然不起作用,在百思不得其解时,想到

当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题

当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变,这时候就进行了验证,所以每次进行验证的都是bootstrap-datepicker.js选中日期的前一个值,比如:默认日期为空,当第一次选中日期,假设该日期为(2019-2-22),那么本次验证的值则为空,所以验证不通过:当再次选中时间,假设这次选中时间为(2019-2-23),才有前一个值为(2

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

今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaeff

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

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.使用方法如下 1.引用JS库 <script src="../Script/jquery.js" type="text/javascript"></script><script src=&q

jQuery.Validate.js在Form标签很多的时候验证速度慢的处理。

最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会花销大量时间.这些时间主要用在两个地方: 1.表单中标签的检查对应jQuery.Validate.js中checkForm()方法. 2.检查完标签后需要显示错误或成功信息对应jQuery.Validate.js中ShowErrors()方法. 先前我们是用的jQuery.Validate.js-1

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script>

表单验证插件之jquery.validate.js

提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery表单验证插件jQuery.validate.js</title> <sty