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>