不用submit的validate验证
郎意
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script
src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script
src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script
src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
var vali;
$().ready(function() {
vali = $("#signupForm").validate({
rules : {
firstname : "required",
lastname : "required",
username : {
required : true,
minlength : 2
},
password : {
required : true,
minlength : 5
},
confirm_password : {
required : true,
minlength : 5,
equalTo : "#password"
},
email : {
required : true,
email : true
},
"topic[]" : {
required : "#newsletter:checked",
minlength : 2
},
agree : "required"
},
messages : {
firstname : "请输入您的名字",
lastname : "请输入您的姓氏",
username : {
required : "请输入用户名",
minlength : "用户名必需由两个字母组成"
},
password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母"
},
confirm_password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母",
equalTo : "两次密码输入不一致"
},
email : "请输入一个正确的邮箱",
agree : "请接受我们的声明",
topic : "请选择两个主题"
}
});
});
function test() {
console.log(vali.form())
if (vali.form()) {
alert("没错")
//ajax
//
} else {
alert("有错")
}
}
$().ready(function() {
$("#signupForm").validate({
rules : {
firstname : "required",
lastname : "required",
username : {
required : true,
minlength : 2
},
password : {
required : true,
minlength : 5
},
confirm_password : {
required : true,
minlength : 5,
equalTo : "#password"
},
email : {
required : true,
email : true
},
"topic[]" : {
required : "#newsletter:checked",
minlength : 2
},
agree : "required"
},
messages : {
firstname : "请输入您的名字",
lastname : "请输入您的姓氏",
username : {
required : "请输入用户名",
minlength : "用户名必需由两个字母组成"
},
password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母"
},
confirm_password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母",
equalTo : "两次密码输入不一致"
},
email : "请输入一个正确的邮箱",
agree : "请接受我们的声明",
topic : "请选择两个主题"
}
});
});
</script>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label> <input id="firstname"
name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label> <input id="lastname"
name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label> <input id="username"
name="username" type="text">
</p>
<p>
<label for="password">密码</label> <input id="password"
name="password" type="password">
</p>
<p>
<label for="confirm_password">验证密码</label> <input
id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">Email</label> <input id="email" name="email"
type="email">
</p>
<p>
<label for="agree">请同意我们的声明</label> <input type="checkbox"
class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我乐意接收新信息</label> <input type="checkbox"
class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>主题 (至少选择两个) -
注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
<label for="topic_marketflash"> <input type="checkbox"
id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
</label> <label for="topic_fuzz"> <input type="checkbox"
id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
</label> <label for="topic_digester"> <input type="checkbox"
id="topic_digester" value="digester" name="topic[]">Mailing
list digester
</label> <label for="topic" class="error" style="display: none">至少选择两个</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
<button class="button" type="button" onclick="test()">提交2</button>
</p>
</fieldset>
</form>
</body>
</html>
类似资料：