<html lang="en">
<head>
<title>jQuery Validate 插件 - 错误消息容器</title>
<link rel="stylesheet" media="screen" href="http://jquery.bassistance.de/validate/demo/css/screen.css">
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<style>
.cmxform fieldset p.error label { color: red; }
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
.container label.error {
display: inline;
}
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
</style>
<script>
// 只用于演示
$.validator.setDefaults({
submitHandler: function() {
alert("已提交！（点击取消按钮跳过验证）");
}
});
$().ready(function() {
$("#form1").validate({
errorLabelContainer: $("#form1 div.error")
});
var container = $('div.container');
// 当提交时验证表单
var validator = $("#form2").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li'
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
</head>
<body>
<div id="main">
<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>登录表单</legend>
<p>
<label>用户名</label>
<input name="user" title="请输入您的用户名（至少 3 个字符）" required minlength="3">
</p>
<p>
<label>密码</label>
<input type="password" maxlength="12" name="password" title="请输入您的密码，5 - 12 个字符" required minlength="5">
</p>
<div class="error">
</div>
<p>
<input class="submit" type="submit" value="登录">
</p>
</fieldset>
</form>
<div class="container">
<h4>您提交的表单中存在严重错误，请参见下面的细节。</h4>
<ol>
<li><label for="email" class="error">请输入您的电子邮件地址</label></li>
<li><label for="phone" class="error">请输入您的电话<b>号码</b>（2 - 8 个字符）</label></li>
<li><label for="address" class="error">请输入您的地址（至少 3 个字符）</label></li>
<li><label for="avatar" class="error">请选择一个图像（png、jpg、jpeg、gif）</label></li>
<li><label for="cv" class="error">请选择一个文档（doc、docx、txt、pdf）</label></li>
</ol>
</div>
<form class="cmxform" id="form2" method="get" action="">
<fieldset>
<legend>验证一个完整的表单</legend>
<p>
<label for="email">Email</label>
<input id="email" name="email" required type="email">
</p>
<p>
<label for="agree">喜欢的颜色</label>
<select id="color" name="color" title="请选择您喜欢的颜色！" required>
<option></option>
<option>红色</option>
<option>蓝色</option>
<option>黄色</option>
</select>
</p>
<p>
<label for="phone">电话</label>
<input id="phone" name="phone" required type="number" rangelength="[2,8]">
</p>
<p>
<label for="address">地址</label>
<input id="address" name="address" required minlength="3">
</p>
<p>
<label for="avatar">头像</label>
<input type="file" id="avatar" name="avatar" required>
</p>
<p>
<label for="agree">请同意我们的条款</label>
<input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required>
</p>
<p>
<input class="submit" type="submit" value="提交">
<input class="cancel" type="submit" value="取消">
</p>
</fieldset>
</form>
<div class="container">
<h4>您提交的表单中存在严重错误，请参见表单上的细节！</h4>
</div>
</div>
</body>
</html>