javascript - jQuery 初学者...验证表单字段

Question

我现在正在学习 jQuery，并希望用它来验证表单字段。

相关注册表位于 http://taehee.pumpl.com/register.php

我制作的表单字段的基本代码是:

<div id="register">
        <form action="">
        <fieldset>
        <legend>Register</legend>
        <ol>
            <li><label for="username">유저네임</label>
            <input id="username" name="username" size="32" type="text" ></li>
            <li><label for="email">이메일</label>
            <input id="email" name="email" size="32" type="text"></li>
            <li><label for="password">비밀번호</label>
            <input id="password" name="password" size="32" type="password"></li>
            <li><label for="password2">비밀번호 확인</label>
            <input id="password2" name="password2" size="32" type="password"></li></li>
        </ol>
        </fieldset>
        <input type="submit" value="Submit">
        </form>
    </div> <!-- register -->

我使用以下命令在 header 中加载了 jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

我还使用以下代码创建了一个脚本:

$('#register').validate({
rules: {
    username: {
        required: true,
    },
    email: {
        required: true,
        email: true
    },
    password: {
        minlength: 4,
        required: true
    },
    password2: {
        equalTo: "#password"
    }
},
success: function(label) {
    label.text('OK!').addClass('valid');
}

});

不幸的是，它似乎不起作用。我填写了表格，无论字段是否全部错误都没有关系。

有人可以帮助我吗？谢谢!

Answer 1

这里有两个小/易于修复的问题。首先，正如注释所述，您需要包含验证插件，例如:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

这会将其从 Microsoft CDN 中提取，或者从您的站点抓取并托管。第二个问题是 .validate() 适用于 <form>元素，所以你需要这个:

 $("#register form")

或者，将 ID 提供给 <form>直接并使用该选择器。

Here's an updated version with both fixes in place ，jQuery也发布了1.4.1和 1.4.2 ，您可能需要考虑升级以获得这些错误修复，只需更改 1.4.0在你的src网址为1.4.2 .