jQuery regex match関数は常にfalseを返します

jQueryでシンプルフォームvalitation関数を作成しようとしていますが、何らかの点でこの関数は常に入力がfalseであることを返します。あなたは私を助けることができます？jQuery regex match関数は常にfalseを返します

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style>input.notoke { border: 1px solid red; }</style> 
</head> 
<body> 
<script> 
$(document).ready(function(){ 
    $("form#validate :input").each(function(){ 
    $(this).on("change paste keyup", function() { 

     if ($(this).val().match($(this).attr('data-regex'))){ 
     $(this).removeClass('notoke'); 
     } else { 
     $(this).addClass('notoke'); 
     } 

    }); 
    }); 
}); 
</script> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <h3>Formulier</h3> 
     <form role="form" id="validate"> 
    <div class="form-group"> 
    <label for="email">Email address:</label> 
    <input type="text" class="form-control" id="email" data-regex="^[A-Z0-9._%+-][email protected][A-Z0-9.-]+.[A-Z]{2,4}$"> 
    </div> 
    <div class="form-group"> 
    <label for="pwd">Password:</label> 
    <input type="password" class="form-control" id="pwd" data-regex="/^[a-z0-9_-]{6,18}$/"> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> </div> 
    </div> 
</div> 

</body> 
</html>

私は間違っています...あなたは私を助けることができますか？

私は '警告'を使って$（this）.valと$（this）.attr（ 'data-regex'）の値を見てみましたが、 DOMから読み取る

出典

2016-07-07 FJ-web

ものは、あなたが正規表現に文字列を変換するRegExpコンストラクタを使用して、それに文字列を渡すためにきた文字列

です。

if ($(this).val().match(new RegExp($(this).attr('data-regex')))) { 
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

また、文字列にデリミタのスラッシュは必要ありません。

そして、私は、文字列ではなく、正規表現を満たすかどうかを確認するためにRegExp#testを使用することをお勧めします数字は

\\d

を使用すると一致するように、例えば

を必要に応じて、いくつかのメタ文字をエスケープ倍増することを確認してくださいまたString#match

if (new RegExp($(this).data('regex')).test($(this).val())) {

の、 jQueryコードを短縮することができます。

$("form#validate :input").on("change paste keyup", function() { 
    $(this).toggleClass('notoke', !new RegExp($(this).data('regex')).test($(this).val())); 
});

Working Demo

出典

2016-07-07 13:27:48 Tushar

あなたの迅速なresponeのためにあなたに感謝。残念ながら、あなたの提案は私にエラーを残します：** Uncaught TypeError：$（...）。data（...）。testは関数ではありません** –

@ FJ-webかっこが間違っています。 '新しいRegExp（$（this）.data（ 'regex'））を使用してください。test（$（this）.val（））'。 – Tushar

Thnx。しかし、結果としてはまだ偽です。私のdata-regex属性に何か問題はありますか？ –

jQuery regex match関数は常にfalseを返します

答えて

関連する問題