jQuery插件——表單驗證（jquery.validate.js）

HTML

<form id="loginForm">
    <label class="form__label--hidden" for="username">用戶名:</label>
    <input class="form__input" type="text" id="username" name="username" placeholder="用戶名">
    <label class="form__label--hidden" for="password">密碼:</label>
    <input class="form__input" type="password" id="password" name="password" placeholder="密碼">
    <input class="form__btn" type="submit" value="登錄">
</form>

<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
    $('#loginForm').validate({
        rules: {
            username: {
                required: true,
                minlength: 6,
                maxlength: 16
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 16
            }
        },
        messages: {
            username: {
                required: "必須填寫用戶名！",
                minlength: "用戶名長度不能小於6位！",
                maxlength: "用戶名長度不能大於16位！"
            },
            password: {
                required: "必須填寫密碼！",
                minlength: "密碼長度不能小於6位！",
                maxlength: "密碼長度不能大於16位！"
            }
        }
    });
});       
</script>