如何使用jQuery驗證插件驗證正則表達式？

-6

如何使用jQuery驗證插件驗證正則表達式？在這段代碼中，我們可以使用一個jQuery插件「jQuery Validation」插件驗證表單，但我不知道使用這個插件來驗證正則表達式。如何使用jQuery驗證插件驗證正則表達式？

<!DOCtype html> 
    <html> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script> 
<body> 
<form method="post" name="signup_form" enctype="multipart/form-data"> 
<table> 
<tr><td>First Name:</td><td><input type="text" name="first_name" placeholder="First name" required><span> *</span></td></tr> 
<tr><td>Middle Name:</td><td><input type="text" name="middle_name" placeholder="Middle Name"></td></tr> 
<tr><td>Last Name:</td><td><input type="text" name="last_name" placeholder="Last Name" required><span> *</span></td></tr> 
<tr><td>Username:</td><td><input type="text" name="username" placeholder="Username" required><span> *</span></td></tr> 
<tr><td>Password:</td><td><input id="password1" type = "password" name="password" required/><span> *</span></td></tr> 
<tr><td>Re-Enter Password:</td><td><input class="left" id="password_again" type = "password" name="password_again" required/><span> *</span></td></tr> 
<tr><td>Email:</td><td> <input id="email" type="email" name="email" required/><span> *</span></td></tr> 
<tr><td>Gender:</td><td><input type="radio" name="gender" value="male" required>Male <input type="radio" name="gender" value="female" required> Female<span> *</span></td></tr> 
<tr><td>Date of Birth:</td><td><select name = "day" required><option value="">Day</option> 
<?php for($i = 1; $i < 32; $i++){?> 
<option value = "<?php echo $i;?>"><?php echo $i;?></option> 
<?php }?> 
</select> 
<select name="month" required><option value="">Month</option> 

<option value = "jan">Jan</option> 
<option value = "feb">Feb</option> 
<option value = "mar">Mar</option> 
<option value = "apr">Apr</option> 
<option value = "may">May</option> 
<option value = "jun">Jun</option> 
<option value = "jul">Jul</option> 
<option value = "aug">Aug</option> 
<option value = "sep">Sep</option> 
<option value = "oct">Oct</option> 
<option value = "nov">Nov</option> 
<option value = "dec">Dec</option> 

</select> 
<select name = "year" required><option value="">Year</option> 
<?php for($i = 2013; $i > 1904; $i--){?> 
<option value = "<?php echo $i;?>"><?php echo $i;?></option> 
<?php }?> 
</select><span> *</span></td></tr> 
<tr><td>Address Line 1:</td><td><input type="text" name="address1" placeholder="Address Line 1" required><span> *</span></td></tr> 
<tr><td>Address Line 2:</td><td><input type="text" name="address2" placeholder="Address Line 2"></td></tr> 
<tr><td>Country:</td><td><input type="text" name="country" placeholder="Country" required><span> *</span></td></tr> 
<tr><td>State:</td><td><input type="text" name="state" placeholder="State" required><span> *</span></td></tr> 
<tr><td>City:</td><td><input type="text" name="city" placeholder="City" required><span> *</span></td></tr> 
<tr><td>Pincode:</td><td><input type="text" name="pincode" placeholder="Pincode" required><span> *</span></td></tr> 
<tr><td colspan="2" align="center"> 
<input type="submit" value="Enter" formaction="sucess.php"></td></tr> 
</table> 
<script > 


$("#signup_form").validate();</script> 
</form> 
</body> 
</html>

來源

2013-08-29 sanu

使用[香草JS]（ http://vanilla-js.com/）。 – Leri

通過找到一個插件，將它傳遞給你，然後評估結果:) – MLeFevre

你能提一個好的插件嗎？ – sanu

不需要jQuery。使用正則表達式構造和捕獲異常：

try { 
    new RegExp(someString); 
    console.log('good'); 
} catch (e) { 
    console.log('bad'); 
}

Demonstration（類型的東西輸入到知道，如果這是一個很好形成的正則表達式）

來源

2013-08-29 10:25:57

哦，來吧，你至少可以做出這個jQuery插件：D – hakre

@hakre在我的演示中我使用jQuery :) –

好吧，你現在說服了我：+1 – hakre

標題：我如何驗證使用jQuery一個正規表示法驗證插件？

簡單地回答這個被提出的問題...

報價OP：

」 ......我們可以驗證使用一個jQuery插件的形式，「jQuery驗證」插件，但我不知道使用這個插件驗證正則表達式。「

首先，您不需要同時包含jQuery Validate插件的未縮小版本和縮小版本。選擇一個或另一個。在這個例子中，精縮...

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

您可以簡單地使用pattern規則以驗證正則表達式。包括additional-methods.js文件並將您的regex聲明爲參數。

rules: { 
     field1: { 
      required: true, 
      pattern: '[a-zA-Z]+' 
     }, 
     ....

DEMO：http://jsfiddle.net/36tegu4o/

既然你是$("#signup_form")使用jQuery針對您的形式，它不會工作，因爲你的<form>標籤內沒有id="signup_form"。你將需要添加此id ...

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

否則，如果您不能添加id，您需要更改jQuery選擇爲目標的name，而不是...

$("form[name='signup_form']").validate({ ...

另外，使用the addMethod method創建自定義的方法/規則。在這種情況下，我把它稱爲myCustomMethod ...

$.validator.addMethod("myCustomMethod", function(value, element) { 
    // your javascript regex function 
    // return true if it passes 
    // return false if it fails and the message will automatically display 
}, "your custom error message");

然後致電.validate()初始化插件並分配您的規則。 myFieldName表示要分配規則的字段的name屬性。你的jQuery應包含在一個DOM準備的事件處理程序，以確保HTML DOM的操縱之前完全構造...

$(document).ready(function() { 

    $("#signup_form").validate({ 
     rules: { 
      myFieldName: { 
       myCustomMethod: true 
      } 
     } 
    }); // close validate() 

}); // close document.ready

DEMO：http://jsfiddle.net/HVtCy/

來源

2013-08-29 20:24:57 Sparky

如何使用jQuery驗證插件驗證正則表達式？

回答

相關問題