Question

我使用THAT插件来验证表单，但我对rangelenght方法有疑问。不要为我工作。我尝试复制粘贴，但仍然无法正常工作。我在控制台中没有任何错误。发送表单后只有一个字符，我在控制台“广告”中看到我查看插件代码，方法存在。你知道这是什么原因吗？

这是我的代码：

$( "#login-form" ).validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            rangelength: [6, 20]
        }
    },
    submitHandler: function(form) {
        console.log('ads');
    }
});

HTML：

<form class="m-t" role="form" action="index.html" id="login-form">
    <div class="form-group">
        <input type="email" id="email" class="form-control" placeholder="Adres email" required="">
    </div>
    <div class="form-group">
        <input type="password" id="password" class="form-control" placeholder="Hasło" required="">
    </div>
    <button type="submit" class="btn btn-primary block full-width m-b">Login</button> 
    <a href="#">
        <small>Zapomniałeś hasła?</small>
    </a>
</form>

Answer 1

将name="password"和rules添加到输入字段。验证插件使用name属性匹配id的元素，而不是email。

required和type验证有效，因为该插件也会查看required和type="email"属性。因此，如果字段具有email: true，则它相当于规则中的<form class="m-t" role="form" action="index.html" id="login-form"> <div class="form-group"> <input type="email" id="email" name="email" class="form-control" placeholder="Adres email" required=""> </div> <div class="form-group"> <input type="password" id="password" name="password" class="form-control" placeholder="Hasło" required=""> </div> <button type="submit" class="btn btn-primary block full-width m-b">Login</button> <a href="#"> <small>Zapomniałeś hasła?</small> </a> </form>。

app.directive('datePicker', function(){
    return {
        restrict : "A",
        require: 'ngModel',
        link : function(scope, element, attrs, ngModel){
            $(function(){
                $(element).datepicker({
                     changeMonth: true,
                     changeYear: true,
                     closeText: 'Clear',
                     showButtonPanel: true,
                     onClose: function () {
                        var event = arguments.callee.caller.caller.arguments[0];
                        // If "Clear" gets clicked, then really clear it
                        if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                            $(this).val('');
                            scope.$apply(function() {
                               ngModel.$setViewValue(null);
                            });
                        }
                    },
                    onSelect: function(date){
                        scope.$apply(function() {
                           ngModel.$setViewValue(date);
                        });
                    }
               });
            })
        }
    }
})

Corrected fiddle

验证方法不起作用

1 个答案: