2008-11-11 1 views
208

Я использую плагин jQuery. Качественный товар! Я хочу перенести существующее существующее решение ASP.NET для использования jQuery вместо валидаторов ASP.NET. Мне не хватает замены для правильного выражения . Я хочу быть в состоянии сделать что-то вроде этого:jQuery validate: Как добавить правило для проверки правильности выражения?

$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" }) 

Как добавить правило для достижения этой цели?

+109

OMG это ** НЕ ** есть регулярное выражение проверки ?! – 2009-12-08 16:06:38

+3

Я хочу сказать, кто захочет regex для валидации в любом случае ... ...;) – jamiebarrow 2010-10-08 11:58:22

+1

Пожалуйста, скажите, что вы проверяете входную сторону сервера, а не просто полагаетесь на проверку на стороне клиента, так как это, очевидно, может быть отключено. – 2009-05-14 12:14:25

ответ

290

Благодаря ответ RedSquare я добавил метод, как это:

$.validator.addMethod(
     "regex", 
     function(value, element, regexp) { 
      var re = new RegExp(regexp); 
      return this.optional(element) || re.test(value); 
     }, 
     "Please check your input." 
); 

теперь все, что вам нужно сделать, чтобы проверить соответствие с любым регулярным выражением:

$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" }) 

Кроме того, похоже, есть файл под названием дополнительный-methods.js, который содержит метод «образец», который может быть RegExp при создании с использованием методы без кавычек.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

+1

Какова точка назначения неиспользуемых переменных «var check = false;»? «check» не проверяется нигде, каламбур. – 2010-05-20 05:29:41

+4

$ ("Текстовое поле") должно быть $ ("# Textbox"). – 2010-05-20 11:30:35

+0

Работает для меня, спасибо: +1 – 2010-05-20 21:05:13

72

Вы можете использовать addMethod()

например

$.validator.addMethod('postalCode', function (value) { 
    return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value); 
}, 'Please enter a valid US or Canadian postal code.'); 

хорошую статью здесь https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

+4

Не отвечайте на вопрос.Что делать, если вы хотите правило общего регулярного выражения? С этим ответом вам нужно добавить методMode для каждого разного регулярного выражения. – AndreasN 2009-03-27 08:09:35

+19

, если у вас есть лучший ответ, не стесняйтесь .... – redsquare 2009-03-27 09:54:35

17

Расширение ответ PeterTheNiceGuy немного:

$.validator.addMethod(
     "regex", 
     function(value, element, regexp) { 
      if (regexp.constructor != RegExp) 
       regexp = new RegExp(regexp); 
      else if (regexp.global) 
       regexp.lastIndex = 0; 
      return this.optional(element) || regexp.test(value); 
     }, 
     "Please check your input." 
); 

Это позволит вам передать объект регулярного выражения к правилу.

$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ }); 

Сброс lastIndex свойство необходимо, когда g -flag устанавливается на RegExp объекта. В противном случае он начнет проверку с позиции последнего совпадения с этим регулярным выражением, даже если строка темы отличается.

Некоторые другие идеи, у меня было бы, чтобы вы использовать массивы регулярных выражений-х годов, и еще одно правило для отрицания регулярных выражений-х:

$("password").rules("add", { 
    regex: [ 
     /^[a-zA-Z'.\s]{8,40}$/, 
     /^.*[a-z].*$/, 
     /^.*[A-Z].*$/, 
     /^.*[0-9].*$/ 
    ], 
    '!regex': /password|123/ 
}); 

Но осуществление тех бы, возможно, слишком много.

19

Как уже упоминалось на addMethod documentation:

Пожалуйста, обратите внимание: В то время как велик соблазн добавить метод регулярных выражений, который проверяет это параметр со значением, он намного чище инкапсулировать эти регулярные выражения внутри своего собственного метода. Если вам нужно много разных выражений, попробуйте извлечь общий параметр. Библиотека регулярных выражений: http://regexlib.com/DisplayPatterns.aspx

Итак, да, вы должны добавить метод для каждого регулярного выражения.Накладные расходы минимальны, в то время как это позволяет вам присвоить регулярному выражению имя (не быть недооцененным), сообщение по умолчанию (удобно) и возможность повторно использовать его в разных местах, не повторяя его снова и снова.

41

У меня возникли проблемы с составлением всех частей для выполнения проверки правильности выражения jQuery, но я получил его для работы ... Вот полный рабочий пример. Он использует плагин в «Validation», который можно найти в jQuery Validation Plugin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script src="http://YOURJQUERYPATH/js/jquery.js" type="text/javascript"></script> 
    <script src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $().ready(function() { 
      $.validator.addMethod("EMAIL", function(value, element) { 
       return this.optional(element) || /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); 
      }, "Email Address is invalid: Please enter a valid email address."); 

      $.validator.addMethod("PASSWORD",function(value,element){ 
       return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value); 
      },"Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number."); 

      $.validator.addMethod("SUBMIT",function(value,element){ 
       return this.optional(element) || /[^ ]/i.test(value); 
      },"You did not click the submit button."); 

      // Validate signup form on keyup and submit 
      $("#LOGIN").validate({ 
       rules: { 
        EMAIL: "required EMAIL", 
        PASSWORD: "required PASSWORD", 
        SUBMIT: "required SUBMIT", 
       }, 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="LOGIN_FORM" class="form"> 
     <form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login"> 
      <h1>Log In</h1> 
      <div id="LOGIN_EMAIL"> 
       <label for="EMAIL">Email Address</label> 
       <input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" /> 
      </div> 
      <div id="LOGIN_PASSWORD"> 
       <label for="PASSWORD">Password</label> 
       <input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" /> 
      </div> 
      <div id="LOGIN_SUBMIT"> 
       <input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" /> 
      </div> 
     </form> 
    </div> 
</body> 
</html> 
19

Нет причины, чтобы определить регулярное выражение в виде строки.

$.validator.addMethod(
    "regex", 
    function(value, element, regexp) { 
     var check = false; 
     return this.optional(element) || regexp.test(value); 
    }, 
    "Please check your input." 
); 

и

telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 }, 

тис лучше так, нет?

10

Я получил его на работу, как это:

$.validator.addMethod(
    "regex", 
    function(value, element, regexp) { 
     var check = false; 
     return this.optional(element) || regexp.test(value); 
    }, 
    "Please check your input." 
); 


$(function() { 
    $('#uiEmailAdress').focus(); 
    $('#NewsletterForm').validate({ 
     rules: { 
      uiEmailAdress:{ 
       required: true, 
       email: true, 
       minlength: 5 
      }, 
      uiConfirmEmailAdress:{ 
       required: true, 
       email: true, 
       equalTo: '#uiEmailAdress' 
      }, 
      DDLanguage:{ 
       required: true 
      }, 
      Testveld:{ 
       required: true, 
       regex: /^[0-9]{3}$/ 
      } 
     }, 
     messages: { 
      uiEmailAdress:{ 
       required: 'Verplicht veld', 
       email: 'Ongeldig emailadres', 
       minlength: 'Minimum 5 charaters vereist' 
      }, 
      uiConfirmEmailAdress:{ 
       required: 'Verplicht veld', 
       email: 'Ongeldig emailadres', 
       equalTo: 'Veld is niet gelijk aan E-mailadres' 
      }, 
      DDLanguage:{ 
       required: 'Verplicht veld' 
      }, 
      Testveld:{ 
       required: 'Verplicht veld', 
       regex: '_REGEX' 
      } 
     } 
    }); 
}); 

Убедитесь, что регулярное выражение между / :-)

2

в основном мы используем обозначения разметки JQuery плагин проверки и тому размещенные образцы не сработали для нас, когда флаги присутствуют в регулярном выражении, например

<input type="text" name="myfield" regex="/^[0-9]{3}$/i" /> 

поэтому мы используем следующий фрагмент

$.validator.addMethod(
     "regex", 
     function(value, element, regstring) { 
      // fast exit on empty optional 
      if (this.optional(element)) { 
       return true; 
      } 

      var regParts = regstring.match(/^\/(.*?)\/([gim]*)$/); 
      if (regParts) { 
       // the parsed pattern had delimiters and modifiers. handle them. 
       var regexp = new RegExp(regParts[1], regParts[2]); 
      } else { 
       // we got pattern string without delimiters 
       var regexp = new RegExp(regstring); 
      } 

      return regexp.test(value); 
     }, 
     "Please check your input." 
); 

Конечно, сейчас можно было бы объединить этот код, с одним из выше также позволяют пройти RegExp объекты в плагин, но так как мы не делали это нужно, мы оставили это упражнение для читателя ;-).

PS: там также поставляется плагин для того, https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

3

Это рабочий код.

function validateSignup() 
{ 
    $.validator.addMethod(
      "regex", 
      function(value, element, regexp) 
      { 
       if (regexp.constructor != RegExp) 
        regexp = new RegExp(regexp); 
       else if (regexp.global) 
        regexp.lastIndex = 0; 
       return this.optional(element) || regexp.test(value); 
      }, 
      "Please check your input." 
    ); 

    $('#signupForm').validate(
    { 

     onkeyup : false, 
     errorClass: "req_mess", 
     ignore: ":hidden", 
     validClass: "signup_valid_class", 
     errorClass: "signup_error_class", 

     rules: 
     { 

      email: 
      { 
       required: true, 
       email: true, 
       regex: /^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/, 
      }, 

      userId: 
      { 
       required: true, 
       minlength: 6, 
       maxlength: 15, 
       regex: /^[A-Za-z0-9_]{6,15}$/, 
      }, 

      phoneNum: 
      { 
       required: true, 
       regex: /^[+-]{1}[0-9]{1,3}\-[0-9]{10}$/, 
      }, 

     }, 
     messages: 
     { 
      email: 
      { 
       required: 'You must enter a email', 
       regex: 'Please enter a valid email without spacial chars, ie, [email protected]' 
      }, 

      userId: 
      { 
       required: 'Alphanumeric, _, min:6, max:15', 
       regex: "Please enter any alphaNumeric char of length between 6-15, ie, sbp_arun_2016" 
      }, 

      phoneNum: 
      { 
       required: "Please enter your phone number", 
       regex: "e.g. +91-1234567890"  
      }, 

     }, 

     submitHandler: function (form) 
     { 
      return true; 
     } 
    }); 
} 
0

Это работает для меня, будучи одним из правил проверки:

Zip: { 
       required: true, 
       regex: /^\d{5}(?:[-\s]\d{4})?$/ 
      } 

Надеется, что это помогает

1

Вы можете использовать pattern определены в файле additional-methods.js. Обратите внимание, что этот дополнительный файл-methods.js должен быть включен после JQuery Validate зависимости, то вы можете просто использовать

$("#frm").validate({ 
 
    rules: { 
 
     Textbox: { 
 
      pattern: /^[a-zA-Z'.\s]{1,40}$/ 
 
     }, 
 
    }, 
 
    messages: { 
 
     Textbox: { 
 
      pattern: 'The Textbox string format is invalid' 
 
     } 
 
    } 
 
});
<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.17.0/jquery.validate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script> 
 
<form id="frm" method="get" action=""> 
 
    <fieldset> 
 
     <p> 
 
      <label for="fullname">Textbox</label> 
 
      <input id="Textbox" name="Textbox" type="text"> 
 
     </p> 
 
    </fieldset> 
 
</form>

Смежные вопросы