0

我正在尝试使用 Jquery 验证具有 spring 标签的 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();
     }
 });

});

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

4

2 回答 2

4

您的问题如下：

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

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/

于 2013-09-19T14:31:52.390 回答
0

在函数内部初始化验证代码将不起作用，您需要在 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>
于 2013-09-19T09:16:42.067 回答