пытаясь сделать jquery метод проверки для регулярных выражений (номер, тип файла, пин-код и т. д. c) - PullRequest
Новая
       39

пытаясь сделать jquery метод проверки для регулярных выражений (номер, тип файла, пин-код и т. д. c)

0 голосов
/ 02 мая 2020

Я пытаюсь создать метод с помощью, я смогу проверить для всех пользовательских шаблонов. просто нужно изменить шаблон и соответствующее сообщение для отображения

текущий список вещей, которые я пытаюсь проверить, это

  • индийский номер телефона
  • индийский пин-код
  • индийская дата (дд-мм-гггг)
  • тип файла для загрузки
  • идентификатор банка UPI

, но в текущем фрагменте, просто добавить два

даже после добавления допустимых значений, он показывает неверный ввод 

$(document).ready(function() {

  $.validator.addMethod('regex', function(value, element, pattern) {
    var re = new RegExp(pattern);
    return this.optional(element) || re.test(value);
  }, 'Invalid Value');

  $("#form").validate({
    rules: {
      whatsapp_number: {
        required: true,
        regex: "/^\d{10}$/",
      },
      profile_picture: {
        regex: "/\.(gif|jpe?g|svg|png|webp)$/i"
      }
    },
    messages: {
      whatsapp_number: {
        required: "Whatsapp Number Required",
        regex: "Invalid Phone Number",
      },
      profile_picture: {
        regex: "Invalid Profile Picture Format (gif|jpeg|svg|png|webp)",
      },
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.9.0/jquery.validate.min.js"></script>


<form method="post" enctype="multipart/form-data" id="form">

  <div class="form-group">
    <label>Whatsapp Number</label>
    <input type="text" class="form-control" name="whatsapp_number">
  </div>

  <div class="form-group">
    <label>Profile Picture</label>
    <input type="file" class="form-control" name="profile_picture">
  </div>

  <div class="form-group">
    <input type="submit" class="btn btn-success" value="Register">
  </div>
</form>

1 Ответ

0 голосов
/ 02 мая 2020

Это работает лучше, передав фактическое регулярное выражение 

$(document).ready(function() {

  $.validator.addMethod('regex', function(value, element, re) {
    console.log(value,this.optional(element),re.test(value))
    return this.optional(element) || re.test(value);
  }, 'Invalid Value');

  $("#form").validate({
    rules: {
      whatsapp_number: {
        required: true,
        regex: /^\d{10}$/,
      },
      profile_picture: {
        regex: /\.(gif|jpe?g|svg|png|webp)$/i
      }
    },
    messages: {
      whatsapp_number: {
        required: "Whatsapp Number Required",
        regex: "Invalid Phone Number",
      },
      profile_picture: {
        regex: "Invalid Profile Picture Format (gif|jpeg|svg|png|webp)",
      },
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.9.0/jquery.validate.min.js"></script>


<form method="post" enctype="multipart/form-data" id="form">

  <div class="form-group">
    <label>Whatsapp Number</label>
    <input type="text" class="form-control" name="whatsapp_number">
  </div>

  <div class="form-group">
    <label>Profile Picture</label>
    <input type="file" class="form-control" name="profile_picture">
  </div>

  <div class="form-group">
    <input type="submit" class="btn btn-success" value="Register">
  </div>
</form>
...