Question

我对以下内容有点麻烦。我有多个表单字段以“vendorName-”开头，以数字结尾。我想为这些字段的验证添加规则，但我不知道如何。

这是我到目前为止所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="javascript/jquery-1.4.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js" ></script>
<script>
$().ready(function() { 

     $.validator.addMethod(
        "findRegex",
        function(value, element) {
            return /^.+::[1-9]\d{0,11}$/.test(value);
        },
        "Please check your input."
   );

    $('#myForm').validate({
            submitHandler: function(form){
                $("#formSub").html('<table style="font-size:11px; color:#333;"><tr><td><img border="0" src="images/ajax-loader.gif"/></td><td>Saving! Please wait...</td></table>');
                var options = { 
                    success: showResponse,
                    url:'save.cfm' 
                };
                $('#myForm').ajaxSubmit(options);
                return false;    
            }
    });

    showResponse = function(responseText, statusText) {
        $("#formSub").html(responseText);
    }


    $(":input[name^='vendorName-']").rules("add", { findRegex: true });  //    $('input[name^=vendorName]').

 });
 </script>
 </head>

 <body>

 <form id="myForm" name="myForm" method="post" action="">

<select name="vendorName-1" id="vendorName-1">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

<select name="vendorName-2" id="vendorName-2">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

<select name="vendorName-3" id="vendorName-3">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

<select name="vendorName-4" id="vendorName-4">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

<select name="vendorName-5" id="vendorName-5">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

<input type="submit" name="btnSave" id="btnSave" value="Save"/>
<hr/>
<div id="formSub"></div>
</form>
</body>
</html>

Answer 1

您可以根据选择器动态添加规则，如下所示：

$('#myForm').validate({
  submitHandler: function(form){ 
   ...
  }
});
$(":input[name^='vendorName-']").each(function() {
   $(this).rules("add", { findRegex: true });
});

You can give it a try here

在 .rules()之后调用.validate() 非常重要，这样验证器本身就可以设置并准备就绪。此外，您必须在此使用.each()，因为.rules()仅针对匹配集的第一个元素运行。

jQuery验证和规则

1 个答案: