天道酬勤,学无止境

jQuery验证插件

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(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三、默认的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},


详细内容可以参考这里

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jQuery Validate-对隐藏字段启用验证(jQuery Validate - Enable validation for hidden fields)
    问题 在新版本的jQuery验证插件1.9中,默认情况下忽略隐藏字段的验证。 我将CKEditor用于textarea输入字段,它隐藏了该字段并将其替换为iframe。 该字段在那里,但是对隐藏字段禁用验证。 使用验证插件1.8.1版时,所有功能均按预期工作。 所以我的问题是如何使用v1.9验证插件启用对隐藏字段的验证。 此设置不起作用: $.validator.setDefaults({ ignore: '' }); 回答1 该插件的作者说,您应该使用“不带引号的方括号” , [] http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/ 发布:Validation Plugin 1.9.0: “ ...另一项更改应使带有隐藏元素的表单的设置更加容易,默认情况下现在将忽略这些选项(选项“ ignore”现在默认为“:hidden”)。从理论上讲,可能会破坏现有的设置。在不太可能的情况下,您可以通过将ignore-option设置为“ []”(不带引号的方括号)来解决此问题。 要为所有表格更改此设置: $.validator.setDefaults({ ignore: [], // any other default options and/or rules }); (不需要.setDefaults(
  • jQuery Validation插件:对指定的提交按钮禁用验证(jQuery Validation plugin: disable validation for specified submit buttons)
    问题 我有一个表单,其中包含多个要通过JörnZaeffere出色的jQuery Validation插件进行验证的字段(有些还添加了用于自定义验证的方法)。 您如何规避使用指定提交控件的验证(换句话说,使用某些提交输入进行验证,而不使用其他提交输入进行验证)? 这将类似于带有标准ASP.NET验证程序控件的ValidationGroups。 我的情况: 它与ASP.NET WebForms一起使用,但是如果您愿意,可以忽略它。 但是,我更多地将验证用作“建议”:换句话说,提交表单时,验证会触发,但不是显示“必填”消息,而是“建议”显示的内容与“您”相似错过了以下领域。...您是否仍要继续?” 此时,在错误容器中,现在可以看到另一个提交按钮,可以按下该按钮,它将忽略验证并仍然提交。 如何绕过此按钮控件的表单.validate()并仍然发布? http://jquery.bassistance.de/validate/demo/multipart/上的“购房”示例允许这样做,以命中先前的链接,但这是通过创建自定义方法并将其添加到验证器来实现的。 我希望不必创建自定义方法来复制验证插件中已经存在的功能。 以下是我现在可以立即使用的脚本的简化版本: var container = $("#<%= Form.ClientID %> div.validationSuggestion"); $
  • jQuery DIV上的验证插件(jQuery validate plugin on DIV)
    问题 我正在尝试在div上使用validate插件,如对此问题的答案所示: <script type="text/javascript"> $("#pseudoForm").validate({ onfocusout:true, rules:{ first_name:"required", last_name:"required" } }); </script> <!-- whatever --> <div id="pseudoForm"> <input type="text" name="first_name"/> <input type="text" name="last_name"/> </div> 我都有一个表格。 我在不同的浏览器上遇到许多不同的错误。 Firefox :未定义的验证器 IE8 :“设置”为null或不是对象 Chrome :无法读取未定义的属性“设置” 任何帮助表示赞赏! 回答1 这不是您想听到的答案,但是另一个答案是错误的(发布时可能是正确的,但是此后发生了几项主要的jQuery验证插件更改)。 验证插件(当前)设计为可用于<form> ,并且仅可用于<form> 。 您还可以注意到,所有插件文档都引用一个表单,而不引用任何其他通用容器。 插件本身在内部跟踪validator.currentForm ,它引用传入的选择器的this ,从中获取
  • 使用jquery验证插件,如何在文本框上添加正则表达式验证?(using the jquery validation plugin, how can I add a regex validation on a textbox?)
    问题 我正在从以下网站使用jquery验证插件:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 如何在特定文本框中添加正则表达式检查? 我想检查以确保输入的是字母数字。 回答1 定义一个新的验证功能,并在您要验证的字段的规则中使用它: $(function () { $.validator.addMethod("loginRegex", function(value, element) { return this.optional(element) || /^[a-z0-9\-]+$/i.test(value); }, "Username must contain only letters, numbers, or dashes."); $("#signupForm").validate({ rules: { "login": { required: true, loginRegex: true, } }, messages: { "login": { required: "You must enter a login name", loginRegex: "Login format not valid" } } }); }); 回答2 对jQuery验证插件不熟悉,但是类似这样的方法应该可以解决问题:
  • jQuery验证动态表单输入上的插件不起作用(jquery validate plugin on dynamic form inputs not working)
    问题 我有一个表格,其中有一些字段,然后如果需要,用户可以添加更多相同类型的字段。 我正在使用http://jqueryvalidation.org/ validate插件来验证字段。 当我在某处阅读jquery validate插件时,需要使用唯一的字段名称来验证它们。 因此,我要对每个字段进行唯一的命名。 首先,我希望如果我使用类添加规则,则validate插件将负责动态添加元素的验证。 但事实并非如此。 因此,即使每个字段的名称都是唯一的,validate插件也仅验证最初呈现的第一个输入。 我什至尝试使用$ .clone()希望它能处理所有事件绑定。 但这对我没有用。 所以我移至下划线以重复标记,因为字段数量众多,而且我不想用JS编写模板并相应地命名。 我找不到解决方案,只能停留在这里。 在此问题解决之前,无法继续进行。 这是我写的JS。 $("#work_form").validate(); $(".work_emp_name").rules("add", { required: true }); _.templateSettings.variable = "element"; var tpl = _.template($("#form_tpl").html()); var counter = 1; $("form").on("click", ".add_employer"
  • 覆盖jQuery验证插件电子邮件地址验证(override jquery validate plugin email address validation)
    问题 我发现jQuery验证插件regex不足以满足我的要求。 它接受任何电子邮件地址xxx@hotmail.x作为有效的电子邮件地址,而我希望能够提供此正则表达式/^([a-zA-Z0-9_.-+])+@@(([[a-zA -Z0-9-])+。)+([[a-zA-Z0-9] {2,4})+ $ /,以便验证地址的完整.com部分。 我更关心是否能够提供自己的正则表达式而不是简单的正则表达式(因为没有用于电子邮件验证的简单正则表达式) 仅供参考:我也在做服务器端验证,但是现在我不担心哪个正则表达式是正确的电子邮件地址。 在jQuery validate plugin的“ rules”部分中,有没有办法做到这一点? 这是我现在的规则部分: rules: { email: { required: { depends:function(){ $(this).val($.trim($(this).val())); return true; } }, email: true }, 回答1 我不会这样做,但是为了得到答案,您需要添加自己的自定义验证。 //custom validation rule $.validator.addMethod("customemail", function(value, element) { return /^\w+([-+.']\w+)*@\w+([-.]
  • jQuery验证-如何显示错误的默认标注?(jQuery Validation - How to display the default callout on errors?)
    问题 如果我创建这样的输入控件: <input type="number"> 并在其中输入字母,将在类似弹出窗口的控件中显示错误。 我已经看到它被称为标注,但是我不确定这是否是正确的名称。 看起来像这样: 但是,如果我在jQuery验证插件或ASP.NET中定义自己的规则,则不再有任何奇特的弹出窗口,仅附加了一个标签。 它看起来不尽如人意,也与上面的方法不太一致。 有没有一种简单的方法可以使我的自定义错误消息以相同的方式显示? 回答1 您的图片显示了默认的HTML5验证,该验证仅根据特定的浏览器版本而呈现(或未呈现)。 浏览器必须支持HTML5验证才能看到这些弹出窗口,并且Chrome的弹出窗口看起来与Firefox的弹出窗口不同,等等。HTML5验证是使用HTML5验证属性配置的,您可以像这样将内联添加到每个input元素中... <input type="number" required="required" max="5" .... 但是,当您使用jQuery Validate插件时,它会动态地将novalidate属性添加到<form>标签中。 <form novalidate="novalidate" id="myform" .... novalidate属性用于禁用HTML5验证,以便jQuery Validate可以接管所有表单验证,而不会受到HTML5的干扰。 是的
  • jQuery验证插件错误:TypeError:验证器未定义(jQuery validation plugin error: TypeError: validator is undefined)
    问题 这是表单的html代码: <form method="post" id="login" action="/login"> <div class="login-element"> <label for="email">E-Mail</label> <input type="text" name="email"> </div> <div class="login-element"> <label for="password">Passwort</label> <input type="password" name="password"> </div> <div class="login-element"> <input type="submit" value="Login"> </div> </form> 这是我用于验证的代码: $(document).ready(function() { $("#login").validate({ debug: true, rules: { email: { required: true, email: true }, password: { required: true } }, messages: { email: { required: "Please enter a email adress", email: "Please
  • 使用jQuery验证插件验证数组输入(Validating array inputs using jquery validation plugin)
    问题 我有以下表格。 我正在尝试使用jquery验证插件来验证输入。 我已经尝试了一些代码,但无法正常工作。 当我单击“提交”按钮时,它只是进入表单的操作。 <form name="voucherform" action="something" method="post"> <input type="text" name="reg_number[]" value="" /> <input type="text" name="reg_number[]" value="" /> <input type="text" name="reg_number[]" value="" /> <input type="submit" name="submit" value="submit" /> 您能告诉我如何使用jquery验证插件来验证上述表单吗? 谢谢 :) 我的Jquery代码: <script type="text/javascript" src="<?php echo base_url();?>support/datepicker/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="<?php echo base_url();?>support/js/jquery.validate.js"><
  • 使用jQuery Validate插件验证表单的子集(Validate subset of a form using jQuery Validate plugin)
    问题 我的HTML表单具有多个div,这些div是向导的步骤。 单击“下一步”按钮后,我只想验证活动的div。 我正在使用jQuery.Validate.js插件。 每个div都有一个ID,所以我想要一种这样的方式: wizardForm.validate().element('#first-step :input') 但这只会验证第一个输入,而不是所有输入。 如何验证div中的所有输入? 回答1 根据jAndy的建议,我创建了此辅助函数: jQuery.validator.prototype.subset = function(container) { var ok = true; var self = this; $(container).find(':input').each(function() { if (!self.element($(this))) ok = false; }); return ok; } 用法: if (wizardForm.validate().subset('#first-step')) { // go to next step } 回答2 我尝试了此解决方案,但它对我不起作用。 因此,这就是我使用jquery.validation插件实现相同行为的方式。 验证者: var form = $('#form'); // init validator
  • 如何使用验证插件jQuery来验证输入数组(How to validate array of inputs using validate plugin jquery)
    问题 我是jQuery验证插件的新手,但我想知道我们如何使用验证插件来验证输入框数组。 以下是html代码。 <form id="transport-form"> <input type="text" name="qty[]" id="qty1"> <input type="text" name="qty[]" id="qty2" > <input type="text" name="qty[]" id="qty3"> <input type="text" name="qty[]" id="qty4"> <input type="submit value="submit"> </form> 并且jQuery代码在下面 jQuery("#transport-form").validate({ rules: { 'qty[]': { required: true } }, }); 但是,每当我单击“提交”时,它只会验证第一个值。 其余所有同名值均未通过验证。 请帮忙。 回答1 有时我们需要验证输入元素的数组:例如– <form name="signupForm" class="cmxform" id="signupForm" method="get" action=""> <select name="category[]" id="cat_1"> <option value=""
  • 如何将jQuery Validation插件与元数据,jQuery Forms和xVal一起使用?(How to use the jQuery Validation plugin with metadata, jQuery Forms and xVal together?)
    问题 我一直在使用.NET的xVal框架进行一些开发,以链接服务器端模型的某些验证规则,以及使用jQuery Validation插件和jQuery Form插件提交表单的一些客户端验证。 但是,我在将它们全部链接在一起时遇到了问题。 我正在努力实现以下目标: 允许客户端使用通过调用jQuery Validation的rules(“ add”,options“)插件定义的规则执行基本验证(这是xVal用于获取模型的服务器端定义的规则的功能)。 如果客户端验证成功,请调用服务器以再次输入执行验证的表单数据(针对在客户端上验证的项目以及客户端中无法执行的任何其他验证)。 让服务器返回一个JSON对象,该对象指示可能具有特定字段的任何错误,然后为这些字段设置错误显示。 我已经通过以下方式调用xVal在ASP.NET MVC页面中为插件设置了元数据: <%= Html.ClientSideValidation<Model>("model") %> 这在客户端上转换为以下内容: <script type="text/javascript"> xVal.AttachValidator("model", { "Fields": [ { "FieldName":"title", "FieldRules": [ { "RuleName":"Required", "RuleParameters":{}
  • 40款非常有用的 jQuery 插件推荐
    jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。我们将陆续发布系列文章向大家分享40款非常有用的 jQuery 插件。 MotionCAPTCHA ( 演示 | 下载 ) MotionCAPTCHA 是一款非常特别的 jQuery 验证码插件,要求用户画出看到的形状才能通过验证,用到了 Canvas 标签,所以只能在现代浏览器中使用。 Smart Validate ( 演示 | 下载 ) 这是一款基于 jQuery 的信用卡验证插件,使得繁琐的信用卡格式验证变得轻松,支持各种流行的行用卡类型。 Wave Display Effect with jQuery ( 演示 | 下载 ) 这款 jQuery 插件能够让图片以非常特别的波形方式显示,用到了 CSS3 的旋转特性。 Multi Node Range Data Slider jQ Slider ( 演示 | 下载 ) JQ Slider 是个能够完全自定义风格的滑块插件,非常不错。 Timelinr ( 演示 | 下载 ) Timelinr 是一款免费的时间轴插件,有水平和垂直两种方式,还可以自定义滑动速度和透明度。 Flexible Nav
  • 带有jQuery验证插件的自定义日期格式(Custom date format with jQuery validation plugin)
    问题 如何指定要使用jQuery验证插件验证的自定义日期格式? 回答1 您可以使用addMethod函数创建自己的自定义验证方法。 假设您要验证“ dd / mm / yyyy”: $.validator.addMethod( "australianDate", function(value, element) { // put your own logic here, this is just a (crappy) example return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); }, "Please enter a date in the format dd/mm/yyyy." ); 然后在您的表单上添加: $('#myForm') .validate({ rules : { myDate : { australianDate : true } } }) ; 回答2 nickf的回答很好,但是请注意,验证插件已经在Additional-methods.js文件中包含了其他几种日期格式的验证器。 在编写自己的文件之前,请确保没有人做过。 回答3 我个人使用了非常好的http://www.datejs.com/库。 此处的Docco:http://code.google.com/p/datejs/wiki
  • jQuery验证插件:onfocusout,键入和单击时调用errorPlacement函数(jQuery Validation Plugin: Invoke errorPlacement function when onfocusout, keyup and click)
    问题 我正在使用jquery验证插件,并且想使用errorPlacement函数将错误消息添加到字段title属性,并在该字段旁边仅显示一个✘。 当使用“提交”按钮提交表单但触发以下任何事件时,此方法非常有用:-onfocusout-单击-onkeyup 运行验证检查,但它跳过errorPlacement函数,并在该字段后添加完整的错误消息,如默认行为。 我正在使用以下代码: $("#send-mail").validate({ debug: true, // set this class to error-labels to indicate valid fields success: function(label) { // set text as tick label.html("✔").addClass("valid"); }, // the errorPlacement has to take the table layout into account errorPlacement: function(error, element) { console.log("errorPlacement called for "+element.attr("name")+" field"); // check for blank/success error if(error.text
  • jQuery Validator插件-无验证(jquery validator plugin - no validation)
    问题 我知道这很简单(无论如何,根据插件页面) 但是我尝试使用该插件没有成功,这是我的表格: <form id="mongoForm"> <label for="skip">skip:</label> <input type="text" id="skip" style="width: 70px"> <p /> limit: <span id="limitLable" style="border: 0">1</span> <div id="limit" style="width: 250px"></div> <p /> <label for="collection">collection: </label> <input type="text" id="collection"> <p /> <label for="sort">sort: </label> <input type="text" id="sort"> <p /> <label for="type">type: </label><select id="type"> <option value="find" selected="selected">find</option> <option value="count">count</option> </select> <p /> <label for="query"
  • 具有自定义属性的jQuery验证插件(jQuery Validation plugin with a custom attribute [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 7年前关闭。 改善这个问题 我想将jQuery Validation插件与此HTML一起使用: <input data-validators="required" name="X2aasNr" type="text" value="Nedas" class="cleared" id=""> 如您所见,我使用了一个名为data-validators的自定义属性。 在这种情况下,如何使用jQuery Validation插件? 回答1 引用OP: <input data-validators="required" ... “如您所见,我使用了一个名为data-validators的自定义属性。在这种情况下,如何使用jQuery Validation插件?” 你不能未编写该插件以识别该属性。 请参阅:http://jsfiddle.net/y5xUF/ 但是,您可以按照以下方法定义验证规则: 1)在.validate()声明 $(document).ready(function() { $('#myform').validate({ rules: { fieldName: { required: true } } }); }); http:/
  • 带有显示的jQuery验证程序插件:无表单元素(jquery validator plugin with display:none form elements)
    问题 我正在使用此处找到的验证器插件来验证表单。 我遇到的问题是,如果我在表单输入元素周围放置以下内容,则验证失败: <div style="display:none;"><input type="text" name="test" /></div> 我需要这样做,因为我将其他UI控件层用于输入元素,并且不希望它们可见。 它适用于内联和块元素,但我需要将其隐藏。 反正有解决这个问题的方法吗? 感谢您的任何反馈 更新: 我主要使用django来验证选择选项字段(即{{form.select_option_element}}) 如此有效: <div style="display:none;"> {{form.select_option_element}} </div> ...不起作用 发布后,我似乎可以通过以下方法解决它: <div style="visibility: hidden; height: 0;"> {{form.select_option_element}} </div> 然后,它使我可以验证该领域。 回答1 从jQuery Validate的1.9.0更改日志中: 固定#189-:隐藏的元素现在默认情况下被忽略 要将其重新打开,只需执行以下操作: $(document).ready(function(){ $.validator.setDefaults({ ignore
  • jQuery文件上传插件:如何在添加时验证文件?(Jquery file upload plugin: how to validate files on add?)
    问题 $('#fileupload') .fileupload({ acceptFileTypes: /(\.|\/)(jpg)$/i }) .on('fileuploadadd', function (e, data) { console.log(data.files.valid); //undefined setTimeout(function () { console.log(data.files.valid); //true or false }, 500); }) ; jsFiddle 如何在没有超时的情况下获取属性data.files.valid布尔值? 回答1 这是您要执行的操作: $('#fileupload') .fileupload({ acceptFileTypes: /(\.|\/)(jpg)$/i }) .bind('fileuploadadded', function (e, data) { console.log(data.files.valid); }); 核心jquery.fileupload.js文件正在添加文件并触发“ fileuploadadd”事件,但这是在验证文件之前。 添加文件后,文件jquery.fileupload-ui.js进行验证,并在完成后触发另一个“ fileuploadadded”事件。 更改活动,一切就绪。 请注意:
  • jQuery验证程序插件+ Ajax提交不起作用(jQuery validator plugin + ajax submitting not working)
    问题 我使用bassistance.de的jQuery验证程序插件(1.11)并通过php提交。 现在,我在javacript代码的末尾的提交处理程序中添加了一个ajax调用,但是该调用不起作用,firebug控制台也不存在。 案例1如果我在网站的开头放置了ajax调用,它可以工作,但不再显示验证器插件。 案例2如果我将调用放入提交处理程序中,则该调用不存在,并且表单是由php提交的。 案例3如果我将代码放在页面的末尾,则联系表仍由php提交。 这是ajax调用: $("#contactform").submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "formfiles/submit.php", data: $(this).serialize(), success: function() { $('#contactform').html("<div id='message'></div>"); $('#message').html("<h2>Your request is on the way!</h2>") .append("<p>someone</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id=