一、将验证写在控件内
<form class="cxform" id="commentForm" method="get" action="">
<fieldset>
<legend>请输入您的名字,邮箱,Url,备注</legend>
</fieldset>
<p>
<label for="cname">Name(必需,最小的两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail(必需)</label>
<input id="cemail" type="email" required />
</p>
<p>
<label for="curl">URL(可选)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">必备(必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</form>
二、将校验规则写到js代码中
$("#AddPlan").validate(
{
rules: {
Title:"required",
Content: "required",
start_date: "required",
responsible:"required"
},
messages: {
Title: "请输入标题",
Content: "请输入内容",
start_date: "请选择完成时间",
responsible:"请选择负责人"
},
showErrors: function (errorMap, errorList) {
var msg = "";
$.each(errorList, function (i, v) {
msg += (v.message + "\r\n");
});
if (msg != "") {
layer.open({
content: msg
, skin: 'msg'
, time: 2 //2秒后自动关闭
})
}
},
onfocusout: false,
onkeyup: false,
})
触发验证并判断
var flag = $("#AddPlan").valid();
if (!flag) {
$("#btn_sub").removeAttr('disabled').val("提交");
return
}
三、添加Class形式的校验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"