Question

我正在尝试使用Jquery验证具有弹簧标签的spring mvc表单，但此验证不起作用，需要紧急帮助。正在使用以下JS文件。

在检查时，我能够看到值被元素id传递，但验证和错误消息不是工作。请帮助，因为我不熟悉Jquery。非常感谢您的帮助。

<script type="text/javascript">
    function submitForm()
    {
        $("#savelogin").validate({      
            rules:
            { 
                UName: 
                {
                    required: true,
                    minlength: 6,
                    maxlength: 40
                },
                pwd:
                { 
                    equired: true,
                    minlength: 6,
                    maxlength: 40
                }
            },
            messages:
            {
                UName:
                {
                    required: "username is required!",
                    minlength: "username must be at least 6 characters long"
                },
                pwd:
                {
                    required: "Please enter a password",
                    minlength: "Password must be at least 6 characters long"
                }
            },
            submitHandler: function(form)
            {
                form.submit();
            }
        });  
    }
</script> 

<title>Login Page</title>
</head>
    <body>
    <form:form commandName="userLogin" id="savelogin">
        <fieldset>
            <c:url value="/Registration.do" var="url"/>
            <a href="<c:out value='${url}'/>">New User:Register</a>
            <div>
                <form:label path="userRegistration.userName" ><spring:message code="label.username"/>   </form:label>
                <form:input path ="userRegistration.userName" autocomplete="on" id="UName" />
                <form:errors path="userRegistration.userName"></form:errors> 
            </div>
            <div>
                <form:label path="userRegistration.password"><spring:message code="label.password"/></form:label>
                <form:password path="userRegistration.password"   id="pwd"/>
                <form:errors path="userRegistration.password"></form:errors>
            </div>

            <div>      
                <input type="submit" value="<spring:message code="label.login"/>" name="loginUser" id="submit" onclick="submitForm();"/>
            </div>
        </fieldset>
    </form:form>
</body>

   $(document).ready(function(){ 

    $("#savelogin").validate({      
       rules:
       { 
          UName: 
         {
             required: true,
             minlength: 6,
             maxlength: 40
         },
         pwd:
         { 
             equired: true,
             minlength: 6,
             maxlength: 40
         }
     },
     messages:
     {
         UName:
         {
             required: "username is required!",
             minlength: "username must be at least 6 characters long"
         },
         pwd:
         {
             required: "Please enter a password",
             minlength: "Password must be at least 6 characters long"
         }
     },
     submitHandler: function(form)
     {
         form.submit();
     }
 });

}）;

我试过这个，但什么都没发生。请检查并帮助。

Answer 1

您的问题如下：

1）.validate()方法是插件的初始化，只需要一次调用。将它放在DOM ready事件处理程序中。

2）规则仅由name属性分配，而不是id。由于您的名称包含点，因此必须将它们用引号括起来。请参阅：jqueryvalidation.org/reference/

3）您在密码字段上拼错了required equired。

4）如果您的submitHandler仅包含form.submit()，那么根本不需要它。这是默认行为，因此如果您想在有效表单上执行其他操作，则只需使用submitHandler回调。

文档： jqueryvalidation.org/documentation/

<script type="text/javascript">

$(document).ready(function() {  // <-- enclose your code in a DOM ready handler

    $("#savelogin").validate({
        rules: {
            "userRegistration.userName": { // <-- assign by field name and use quotes
                required: true,
                minlength: 6,
                maxlength: 40
            },
            "userRegistration.password": {
                required: true,  // <-- this rule was misspelled 'equired'
                minlength: 6,
                maxlength: 40
            }
        },
        messages: {
            "userRegistration.userName": {
                required: "username is required!",
                minlength: "username must be at least 6 characters long"
            },
            "userRegistration.password": {
                required: "Please enter a password",
                minlength: "Password must be at least 6 characters long"
            }
        }
        /*, // submitHandler is not needed for this case
        submitHandler: function (form) {
            form.submit();  // <-- this is the default
        }
        */
    });

});

</script>

工作演示：http://jsfiddle.net/kCDDK/

Answer 2

初始化函数内部的验证代码不起作用，您需要在document.ready中编写代码而不是函数内部。

或在身体负荷上召唤功能。

您需要做的就是用以下代码替换脚本标记

<script type="text/javascript">
    $(function()
    {
        $("#savelogin").validate({      
            rules:
            { 
                UName: 
                {
                    required: true,
                    minlength: 6,
                    maxlength: 40
                },
                pwd:
                { 
                    equired: true,
                    minlength: 6,
                    maxlength: 40
                }
            },
            messages:
            {
                UName:
                {
                    required: "username is required!",
                    minlength: "username must be at least 6 characters long"
                },
                pwd:
                {
                    required: "Please enter a password",
                    minlength: "Password must be at least 6 characters long"
                }
            },
            submitHandler: function(form)
            {
                form.submit();
            }
        });  
    });
</script>

SpringForm与Jquery验证无法正常工作

2 个答案: