jqueryバリデータプラグインを使用して、2つの10進数+ドット+コンマのみに正規表現を設定します

debugcn 投稿 Dev

セバスチャンジッケル

私が使用してjQueryの検証プラグインをクライアントサイドのフォーム検証を実行します。それはうまくいきます。しかし、私は正規表現を正確に知らず、私が望むものを達成することができません。

ユーザーが入力フィールドに入力した内容に応じて3つの異なるメッセージを表示するために、3つの異なる正規表現を追加したいと思います。

正規表現1は、特定のメッセージを含む番号ではないかどうかを検出します
正規表現2は、特定のメッセージを含む小数点にドットまたはコンマを受け入れます
特定のメッセージを含むドットまたはコンマの後の小数は2つの数字のみ

関連する質問はたくさんありますが、私はSOについて多くの回答を試しましたが、うまくいきません。

これが作業スニペットです

jQuery.validator.addMethod("decimal", function(value, element) {
  // Validating Decimal Numbers
  return this.optional(element) || /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)$/g.test(value);
}, 'Please enter only numbers (format 0.00)');

jQuery.validator.addMethod("two_decimal", function(value, element) {
  // require 2 decimals
  return this.optional(element) || /^((\d+(\\.\d{0,2})?)|((\d*(\.\d{1,2}))))$/.test(value);
}, "Pleaser enter 2 numbers after dot");

// https://jqueryvalidation.org
$("#test_form").validate({

  submitHandler: function(form) {
    form.submit();
  },
  // rules, options, etc.,
  onkeyup: function(element) {
    // "eager" validation
    this.element(element);
  },
  rules: {
    decimal_number: {
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
      two_decimal: true
    }
  },
  messages: {
    montant_demande: {
      required: "Please enter a number",
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>

春

数値のみ、またはコマ,を含む.小数と2つの小数のみを含むドット区切り文字が必要な場合は、

以下のスニペットを参照してください：

let decimalMessage = "";

jQuery.validator.addMethod("decimal", function(value, element) {
  let decimal = /[^0-9.,]/g.test(value);
  let decimalWithTwoDecimalNumber = /^\d+([.,]\d{2})?$/.test(value);
  
    
  if(decimal) {
    decimalMessage = 'Please enter only numbers (format 0.00)'
    return this.optional(element);
  }
  if(decimalWithTwoDecimalNumber )
    decimalMessage = 'Pleaser enter 2 numbers after dot'
  
  return this.optional(element)||decimalWithTwoDecimalNumber 
},function(params, element) {
    return decimalMessage
});



// https://jqueryvalidation.org
$("#test_form").validate({

  submitHandler: function(form) {
    form.submit();
  },
  // rules, options, etc.,
  onkeyup: function(element) {
    // "eager" validation
    this.element(element);
  },
  rules: {
    decimal_number: {
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
    }
  },
  messages: {
    montant_demande: {
      required: "Please enter a number",
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]