初学jQuery ...验证表单字段

时间:2010-08-15 05:04:52

标签: javascript jquery forms

我正在学习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 -->

我使用以下内容在标头中加载了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');
}

});

不幸的是,它似乎不起作用。我填写表格,这些字段是否都错了并不重要。

任何人都可以帮助我吗?谢谢!

1 个答案:

答案 0 :(得分: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.11.4.2,您可能需要考虑升级以获取这些错误修复,只需更改{{1}中的1.4.0 } src的网址。