web-dev-qa-db-ja.com

jQuery検証プラグイン - 簡単なカスタムルールを作成する方法？

正規表現を使用しないjQuery Validateプラグインを使用して（ addMethod を使用）単純なカスタムルールをどのように作成しますか？

たとえば、チェックボックスのグループの少なくとも1つがチェックされている場合にのみ検証するルールをどの関数が作成するのでしょうか。

javascriptjqueryjquery-validate
335
Edward

次のようにして簡単なルールを作成できます。

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'の内容を変更するだけです。

349
Mark Spangler
$(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"
            }
        }
    });
});
89
Tracy
// 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 }    
});
70
commonpike

カスタムルールとデータ属性

構文data-rule-rulename="true";を使用してdata属性を使用してカスタムルールを作成し、それを要素にアタッチすることができます。

そのため、チェックボックスのグループの少なくとも1つがチェックされているかどうかを確認するには

data-rule-oneormorechecked

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

addMethod

$.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を選択する必要があります）。

NOTE

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>
40
BenG

ありがとう、それはうまくいった！

これが最終的なコードです。

$.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");
22
edward

このようなカスタムルールを追加することができます。

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

そしてこれを次のように使います。

PhoneToggle: {
    booleanRequired: 'on'
}

お役に立てれば

11
Bogdan Mates

この場合：ユーザー登録フォームでは、ユーザーは使用されないユーザー名を選択する必要があります。

これはカスタマイズされた検証ルールを作成しなければならないことを意味します。それはリモートサーバーと非同期httpリクエストを送信します。

  1. あなたのHTMLにinput要素を作成します。
<input name="user_name" type="text" >
  1. フォーム検証規則を宣言します。
  $("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'
      },
    },
  1. リモートコードは次のようになります。
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
1
Siwei Shen 申思维