Question

我在jquery validation Normalizer

上array of input遇到问题

问题是验证效果不佳，应该验证以下模式

i.e. (example.com) or (http://example.com) or (http://www.example.com)

这是代码

HTML

<form name="xyz">
 ...
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
 ...
</form>

的Javascript

$('form').validate({
    rules: {
        'url[]': {
            url: true,
            normalizer: function( el) {
                var url = el.value;

                // Check if it doesn't start with http:// or https:// or ftp://
                if ( url && url.substr( 0, 7 ) !== "http://"
                        && url.substr( 0, 8 ) !== "https://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
        }
    }
 });

Answer 1

看看这个document。

验证函数将input元素的值设置为参数，因此您不必在函数体中访问它。

var url = el.value;

成为

var url = el;

[更新]

我尝试运行提供的代码段问题，它只是验证了一个字段，并忽略其他字段。

＆＃13;

$('form').validate({
    rules: {
        'url[]': {
            url: true,
            normalizer: function( el) {
                var url = el;

                // Check if it doesn't start with http:// or https:// or ftp://
                if ( url && url.substr( 0, 7 ) !== "http://"
                        && url.substr( 0, 8 ) !== "https://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
        }
    }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form name="xyz">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
</form>

＆＃13;

这issue说

name属性对于每个字段或字段组是唯一的（对于radio / checkbox）。

然后我看到这个post，人们提供两种方法来解决这个问题：

修改jquery.validate.js的源代码
使用ignore：[]

所以我尝试了第二个，它确实验证了所有输入，但问题是在第一次编辑输入后会出现警告信息。

除了修改jquery.validate.js，也许你可以将url []的名称更改为url [1]，url [2]，url [3] ...，并将rules添加到每个url输入类，如下所示：

＆＃13;

$('form').validate();
 
 $(".url-input").each(function(){
     $(this).rules( "add",{
            url: true,
            normalizer: function( el) {
                var url = el;

                // Check if it doesn't start with http:// or https:// or ftp://
                if ( url && url.substr( 0, 7 ) !== "http://"
                        && url.substr( 0, 8 ) !== "https://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
         });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form name="xyz">
   <input type="url" name="url[0]" class="url-input" >
   <input type="url" name="url[1]" class="url-input">
   <input type="url" name="url[2]" class="url-input">
   <input type="url" name="url[3]" class="url-input">
</form>

＆＃13;

输入数组上的jQuery Validation Normalizer

1 个答案: