jQuery 验证和规则

发布于 2024-09-19 10:39:54 字数 3922 浏览 1 评论 0原文

我在以下方面遇到了一些麻烦。我有多个以“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>

原文

I am having a little bit trouble with the following. I have multiple form fields starting with "vendorName-" ending with a number. I would like to add a rule to the validate for these fields but I am not sure how to.

Here is what I have so far:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

后知后觉 2024-09-26 10:40:24

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

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

您可以在此处尝试。

调用 .rules() 很重要之后 .validate() 因此验证器本身已设置并准备就绪。另外，您还必须在此处使用 .each() ，因为 < code>.rules() 仅针对匹配集的第一个元素运行。

You can add the rules dynamically based on the selector, like this:

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

You can give it a try here.

It's important that you call .rules() after .validate() so the validator itself it setup and ready. Also you have to use a .each() here, since .rules() only runs against the first element of the matched set.

回复收藏 0 原文

~没有更多了~