jQuery Validate Plugin - 如何创建一个简单的自定义规则？

关键词：

【中文标题】jQuery Validate Plugin - 如何创建一个简单的自定义规则？【英文标题】：jQuery Validate Plugin - How to create a simple custom rule? 【发布时间】：2010-09-19 11:04:07 【问题描述】：

如何使用不使用正则表达式的 jQuery Validate 插件（使用 addMethod）创建简单的自定义规则？

例如，什么函数会创建一个规则，仅当一组复选框中的至少一个被选中时才进行验证？

【问题讨论】：

95 票，我想这意味着bassistance.de/jquery-plugins/jquery-plugin-validation 文档可能不清楚：P 不知道您是否还在搜索（4 年后），但这可能会有所帮助 learn.jquery.com/plugins/… 【参考方案1】：

您可以通过执行以下操作来创建一个简单的规则：

jQuery.validator.addMethod("greaterThanZero", function(value, element) 
    return this.optional(element) || (parseFloat(value) > 0);
, "* Amount must be greater than zero");

然后像这样应用它：

$('validatorElement').validate(
    rules : 
        amount :  greaterThanZero : true 
    
);

只需更改“addMethod”的内容即可验证您的复选框。

【讨论】：

this.optional(element) 是什么 ||做那个功能？似乎每个规则都有，但我不知道为什么它会与除“必需”之外的任何规则相关。 省略它意味着该方法将始终被应用，即使该元素不是必需的。 如果元素为空，我认为 this.optional(element) 返回 true？ 要运行，“数量”应该是页面中某些元素的id和名称？ 是的，数量是指一些输入表单字段的名称属性。【参考方案2】：

$(document).ready(function()
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) 
            $.ajax(
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                
             );
            return response;
        ,
        "Username is Already Taken"
    );

    $("#regFormPart1").validate(
        username: 
            required: true,
            minlength: 8,
            uniqueUserName: true
        ,
        messages: 
            username: 
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            
        
    );
);

【讨论】：

我试过这个方法，效果很好，但是，男人返回的任何其他味精都不是真的，它仍然不能验证“好的”它卡在“用户名已被使用”中，有什么问题吗？我还检查了它是否通过回显值而不是返回 false 和 true 来正确返回，这是有效的。在我看来，我的浏览器没有接收返回 false ，返回 true ？这让我发疯了.. 通过在 addmethod 之前插入一个名为 result 的变量使其工作，似乎 true、false 值在成功函数中正确注册 小心这个。这不是功能齐全的代码，因为 AJAX“成功”将在“返回响应”之后返回；运行，导致意外行为 @Malachi 是正确的。这可以通过执行同步调用来解决，但这很讨厌。我想知道是否有其他方法可以实现这一目标？正如其他人所建议的那样，有remote，但据我所知，它只允许进行一次验证，因此如果您需要进行两次异步验证或根据响应有多个错误消息，它将不起作用。 jquery validate 有一个远程方法：jqueryvalidation.org/remote-method【参考方案3】：

// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) 
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    , "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules(
    optdate :  optdate : true     
);

【讨论】：

addClassRules 是对答案的一个很好的补充。【参考方案4】：

自定义规则和数据属性

您可以使用data 属性使用语法data-rule-rulename="true"; 来创建自定义规则并将其附加到元素

所以要检查一组复选框中是否至少有一个被选中：

data-rule-oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

添加方法

$.validator.addMethod("oneormorechecked", function(value, element) 
   return $('input[name="' + element.name + '"]:checked').length > 0;
, "Atleast 1 must be selected");

您还可以使用语法data-msg-rulename="my new message" 覆盖规则的消息（即：必须选择至少1 个）。

注意

如果您使用data-rule-rulename 方法，则需要确保规则名称全部为小写。这是因为 jQuery 验证函数 dataRules 应用 .toLowerCase() 进行比较，而 HTML5 规范不允许大写。

工作示例

$.validator.addMethod("oneormorechecked", function(value, element) 
  return $('input[name="' + element.name + '"]:checked').length > 0;
, "Atleast 1 must be selected");

$('.validate').validate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>

【讨论】：

仅适用于 jquery.validate ver >= 1.10 我一生都无法在官方文档中找到这一点，我希望他们能更清楚地说明这一点。谢谢！【参考方案5】：

谢谢，成功了！

这是最终代码：

$.validator.addMethod("greaterThanZero", function(value, element) 
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
, "* Please check at least one check box");

【讨论】：

【参考方案6】：

您可以像这样添加自定义规则：

$.validator.addMethod(
    'booleanRequired',
    function (value, element, requiredValue) 
        return value === requiredValue;
    ,
    'Please check your input.'
);

并将其添加为这样的规则：

PhoneToggle: 
    booleanRequired: 'on'
        

【讨论】：

【参考方案7】：

对于这种情况：用户注册表单，用户必须选择未使用的用户名。

这意味着我们必须创建一个自定义的验证规则，它将向远程服务器发送异步 http 请求。

在您的 html 中创建一个输入元素：

<input name="user_name" type="text" >

声明你的表单验证规则：

  $("form").validate(
    rules: 
      'user_name': 
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      ,
    ,

远程代码应该是这样的：

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end

【讨论】：

【参考方案8】：

第 1 步包括 cdn like

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

第 2 步类似代码

  $(document).ready(function()
        $("#submit").click(function () 
              $('#myform').validate( // initialize the plugin
                rules: 
                    id: 
                        required: true,
                        email: true
                    ,
                    password: 
                        required: true,
                        minlength: 1
                    
                ,
                messages: 
                    id: 
                        required: "Enter Email Id"

                    ,
                    password: 
                        required: "Enter Email Password"

                    
                ,
                submitHandler: function (form)  // for demo
                    alert('valid form submitted'); // for demo
                    return false; // for demo
                
            );
       ):
  ); 

【讨论】：

在不提交表单的情况下调用 JQuery Validate Plugin

】在不提交表单的情况下调用JQueryValidatePlugin【英文标题】：CallJQueryValidatePluginwithoutsubmittingtheform【发布时间】：2013-05-1911:46:59【问题描述】：是否可以在不使用JQuery验证插件提交的情况下验证表单？我使用button.click函数进行验... 查看详情

jQuery Validate Plugin - 如何创建一个简单的自定义规则？

】jQueryValidatePlugin-如何创建一个简单的自定义规则？【英文标题】：jQueryValidatePlugin-Howtocreateasimplecustomrule?【发布时间】：2010-09-1911:04:07【问题描述】：如何使用不使用正则表达式的jQueryValidate插件（使用addMethod）创建简单的自... 查看详情

JQuery-Validate Plugin：添加规则以输入“文件”时，我的表单被提交

】JQuery-ValidatePlugin：添加规则以输入“文件”时，我的表单被提交【英文标题】：JQuery-ValidatePlugin:Myformgetssubmittedwhenaddingrulestoinput"file"【发布时间】：2018-01-3012:58:13【问题描述】：我是前端验证的新手，所以我希望在这... 查看详情

jquery的validate插件

http://www.runoob.com/jquery/jquery-plugin-validate.html 项目中的：：$(function(){$(‘#createDepartment‘).validator({//jsvalidator框架rules:{remote:function(element){//远程异步加载return$.ajax({url:/*[[@{/porta 查看详情

jquery插件-validate

下载地址官网下载地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip帮助文档位置：http://jqueryvalidation.org/documentation/菜鸟网地址：http://www.runoob.com/jquery/jquery-plugin-validate.html 【使用步骤】导入jq 查看详情

验证插件——jquery.validate.js

...load/s592652578/9457421教程：http://www.runoob.com/jquery/jquery-plugin-validate.html 插件问题：1.对<inputtype="file">文件上传按钮作用不大，无法验证文件类型，文件选中后无法验证，需要移除焦点才能验证【解决办法】 查看详情

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

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation 一、导入js库1<scriptsrc="../js/jquery.js"type="text/javascript"></script>2<scriptsrc="../js/jquery.validate.js"type="t 查看详情

jquery.validate.js表单验证

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/API:http://jquery.bassistance.de/api-browser/plugins.html默认校验规则(1)required:true必输字段(2)remote:"check.php"使用ajax方法调用check.php验证输入值(3)em 查看详情

jquery验证控件jquery.validate.js的使用介绍

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validationjQueryplugin:Validation使用说明  转载自：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<scriptsrc="../js/jquery 查看详情

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

http://www.cnblogs.com/linjiqin/p/3431835.htmlhttp://blog.csdn.net/lhzjj/article/details/17378435jQuery校验官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation 查看详情

jquery.validate.js实现前端表单验证

参考技术Ajquery.validate.js表单验证官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/API:http://jquery.bassistance.de/api-browser/plugins.html当前版本：1.5.5需要JQuery版本：1.2.6+,兼容1.3.2<scriptsrc="../js/jquery.js"type="text/javascript"></sc... 查看详情

在没有验证插件的情况下使用 jQuery 验证 url？

...用jQuery验证url？【英文标题】：ValidatingurlwithjQuerywithoutthevalidate-plugin?【发布时间】：2011-02-1223:13:42【问题描述】：我需要使用jQuery验证variable中的url，但不能使用validate-plugin。有没有简单的方法来做到这一点？【问题讨论】：【... 查看详情

jquery笔记——插件

验证插件验证插件（validate.js），是一款验证常规表单数据合法性的插件。使用它，极大的解放了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验插件都可以在JQueryUI的plugin页面下载，也可以去其官网下载... 查看详情

jquery整理

$.extend扩展Jquery的bin绑定事件，unbind取消所有事件Jquery学习地址:http://www.runoob.com/jquery/jquery-plugin-validate.htmlJquery学习地址：http://www.haorooms.com/post/jquery_selecter_zj使用ajax的jsonP跨域请求数据，需要在服务器对数据进行处理ajax跨域 查看详情

jquery.validate表单动态验证

jQuery.validate表单动态验证实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2jQuery.validate源码)。也可 查看详情

jquery.validate使用攻略（表单校验）

目录jquery.validate使用攻略1第一章 jquery.validate使用攻略1第二章 jQuery.validate.jsAPI7Customselectors7Utilities8Validator8Listofbuilt-inValidationmethods9validate()的可选项11debug：进行调试模式11第三章 自定义jquery-v 查看详情

jquery.validate使用

JQueryValidate使用总结：一、导入js库<scriptsrc="../js/jquery.js"type="text/javascript"></script><scriptsrc="../js/jquery.validate.js"type="text/javascript"></script>如果也导入jquery.validate. 查看详情

jquery.validate：多个远程规则

】jquery.validate：多个远程规则【英文标题】：jquery.validate:MultipleRemoteRules【发布时间】：2012-10-2808:30:32【问题描述】：我计划使用两个远程规则验证单个文本字段。更像这样。$(\'#form\').validate(rules:remote:\'url1.php\',remote:\'url2.php\',me... 查看详情