jQuery Plugins Validate

/*validate显示错误信息时，会在验证元素的后面加一个label，使用class="error"，并在被验证元素中加class="error"*/
/*例如，被验证表单为myForm*/
#myForm label.error {
font-weight:400;
font-size:12px;
color:red;
padding:0 0 0 3px;
}

//onfocusout默认为true，但是加上会报错。
//官方文档解释：
//A boolean true is not a valid value.
$("#test").validate({
debug:true,
onfocusout:true,
rules: {
testName: "required",
},
messages: {
testName: { required: "请输入姓名" }
}
});

$().ready(function () {
$("#formRegister").validate({
debug: true,
rules: {
Email: {
required: true,
email: true,
},
Password: {
required: true,
rangelength: [6, 20],
},
repeat: {
equalTo: '#password',
}
},
messages: {
Email: {
required: 'Email必须填写',
email: '请输入正确的Email地址',
},
Password: {
required: '密码必须填写',
rangelength: '密码长度6-20位',
},
repeat: {
equalTo: '两次输入的密码必须相同'
}
}
});
});

<form id="myform" method="post" action="">
<p>
<label for="myname">用户名：</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" class="required" />
</p>
<p>
<label for="email">E-Mail：</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">登陆密码：</label>
<input id="password" name="password" type="password"
class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">确认密码：</label>
<input id="confirm_password" name="confirm_password" type="password"
class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<label for="confirm_password">性别：</label>
<!-- 表示必须选中一个 -->
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender" />
</p>
<p>
<label for="confirm_password">爱好：</label>
<!-- checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间  -->
<input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
</p>
<p>
<label for="confirm_password">城市：</label>
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">厦门</option>
<option value="2">泉州</option>
<option value="3">Oi</option>
</select>
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>