-6

如何使用 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>
4

2 回答 2

7

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

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

演示（在输入中输入一些内容以了解它是否是格式良好的正则表达式）

于 2013-08-29T10:25:57.937 回答
3

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

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

引用操作：

“......我们可以使用一个 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]+'
        },
        ....

演示：http: //jsfiddle.net/36tegu4o/

由于您使用 jQuery by 来定位您的表单$("#signup_form")，因此它不起作用，因为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({ ...

或者，使用方法创建您的addMethod自定义方法/规则。在这种情况下，我称之为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 就绪事件处理程序中，以确保在操作 DOM 之前完全构建 HTML...

$(document).ready(function() {

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

});  // close document.ready

演示：http: //jsfiddle.net/HVtCy/

于 2013-08-29T20:24:57.313 回答