Question

如何使用jQuery Validation插件验证正则表达式？在这段代码中，我们可以使用一个jQuery插件“jQuery Validation”插件验证表单，但我不知道使用此插件验证正则表达式。

 <!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>

Answer 1

不需要jQuery。使用RegExp构造函数并捕获异常：

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

Demonstration（在输入中输入内容以了解它是否是一个格式正确的正则表达式）

Answer 2

标题：如何使用jQuery Validation插件验证常规表达式？

简单回答提出的问题......

引用OP：

“...我们可以使用一个jquery插件验证表单，”jQuery Validation“插件，但我不知道使用此插件验证正则表达式。”

首先，您不需要同时包含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文件并声明您的正则表达式作为参数。

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

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

由于您使用$("#signup_form")的jQuery定位表单，因此id="signup_form"标记中没有<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 ready事件处理程序中，以确保在操作DOM之前完全构造HTML ...

$(document).ready(function() {

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

});  // close document.ready

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

如何使用jQuery Validation插件验证正则表达式？

2 个答案: