代码之家 › 专栏 › 技术社区 › Kung Fu Ninja

jQuery验证和规则

jquery-validate jquery

Kung Fu Ninja · 技术社区 · 16 年前

我在以下方面有点问题。我有多个表单域,以“vendorName-”开头,以数字结尾。我想为这些字段的validate添加一个规则,但我不确定如何添加。

到目前为止,我掌握的情况如下:

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

1 回复 | 直到 16 年前

Nick Craver 16 年前

可以根据选择器动态添加规则,如下所示:

$('#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() 这里,自从 .规则() 只针对匹配集的第一个元素运行。