jqueryvalidate表单验证的一个简单例子
自己封装的一个表单验证的小例子：
function validateForm() {
var validator = $("#myForm").validate({
onsubmit:true,// 是否在提交是验证
submitHandler:function(form) {
ajaxSubmit();
},
rules: {
userName: {
required:true
},
sex: {
required:true
},
phoneNum: {
required:true,
digits:true
},
city: {
required:true
},
cameraType: {
required:true
},
shootType: {
required:true
}
},
messages: {
userName: {
required:"请输入您的姓名"
},
sex: {
required:"请选择您的性别"
},
phoneNum: {
required:"请输入您的电话号码",
digits:"请输入正确的电话号码"
},
city: {
required:"请输入您所在的城市"
},
cameraType: {
required:"请输入您的相机型号"
},
shootType: {
required:"请输入您的拍摄风格"
}
},
errorPlacement: function(error, element) { //指定错误信息位置
if (element.is(":radio") ) { //如果是radio
error.appendTo(element.parent().next()); //将错误信息添加当前元素的父结点后面
} else if(element.is(":checkbox")){//或checkbox
error.appendTo($("#shotType")); //将错误信息添加当前元素的父结点后面
}else if(element.is(":text")){
error.appendTo(element.prev());
}else{
error.insertAfter(element);
}
}
//debug: true, //如果修改为true则表单不会提交
//通过之后回调
});
}// end document.ready
测试页面及js代码：
<body>
<div class="container">
<div id="header">
<header style="text-align: center;">
<image style="width:100%;" src="${pageContext.request.contextPath}/images/ApplyClub/acheader.png"/>
</header>
</div>
<form id="myForm" onsubmit="return false;">
<div class="form-group" style="margin-bottom: 0;">
<label for="userName" class="text-muted">您的姓名</label>
<input type="text" name="userName" class="form-control" id="userName" placeholder="请输入您的姓名">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="sex" id="sex" class="text-muted">性别</label>
<label class="checkbox-inline">
<input type="radio" name="sex" id="sex1" style="vertical-align: middle;" value="0">
<font style="color: #505050;vertical-align: middle;">男</font>
</label>
<label class="checkbox-inline">
<input type="radio" name="sex" id="sex2" value="1" style="vertical-align: middle;" >
<font style="color: #505050;vertical-align: middle;">女</font>
</label>
</div>
<div class="form-group" style="margin-top:0;">
<label for="phoneNum" class="text-muted">电话</label>
<input type="text" name="phoneNum" class="form-control" id="phoneNum" placeholder="请输入您的电话">
</div>
<div class="form-group" style="margin-top: 30px;">
<label for="wechat" class="text-muted">微信</label>
<input type="text" name="wechat" class="form-control" id="wechat" placeholder="请输入您的微信号">
</div>
<div class="form-group" style="margin-top: 30px;">
<label for="city" class="text-muted">所在城市</label>
<input type="text" name="city" class="form-control" id="city" placeholder="请输入您所在的城市">
</div>
<div class="form-group" style="margin-top: 30px;">
<label for="camraType" class="text-muted">相机类型</label>
<input type="text" name="cameraType" class="form-control" id="camraType" placeholder="请输入您的相机类型">
</div>
<div class="form-group" style="margin-top: 30px;">
<label class="text-muted" id="shotType">拍摄类型</label>
<div id="style1">
<span class="check">
<input type="checkbox" name="shootType" id="shootType1" value="婚纱摄影">
<span class="textType">
婚纱摄影</span></span>
<span class="check">
<input type="checkbox" name="shootType" id="shootType2" value="婚礼纪实">
<span class="textType">
婚礼纪实</span></span>
<span class="check">
<input type="checkbox" name="shootType" id="shootType3" value="海外旅拍">
<span class="textType">
海外旅拍</span></span>
</div>
<div id="style2">
<span class="check">
<input type="checkbox" name="shootType" id="shootType4" value="亲子">
<span class="textType">
亲子</span></span>
<span class="check">
<input type="checkbox" name="shootType" id="shootType5" value="写真">
<span class="textType">
写真</span></span>
<span class="check">
<input type="checkbox" name="shootType" id="shootType6" value="全家福">
<span class="textType">
全家福</span></span>
</div>
<div id="style3">
<span class="check">
<input type="checkbox" name="shootType" id="shootType7" value="时尚">
<span class="textType">
时尚</span></span>
<span class="check">
<input type="checkbox" name="shootType" id="shootType8" value="商业人像">
<span class="textType">
商业人像</span></span>
</div>
</div>
<div class="form-actions" style="margin-top: 30px;">
<button type="button" class="btn btn-primary" id="toReset">
<font style="color:#ff3a4e;font-size: 13px;">重置</font></button>
<button type="submit" class="btn btn-primary" id="toSubmit" onclick="doSubmit()">点击提交</button>
</div>
</form>
</div>
<!-- 模态窗体 -->
<div class="modal fade" id="myModal"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-body">
<img style="width: 100%;height: auto;" src="${pageContext.request.contextPath}/images/ApplyClub/tanceng2.png"/>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/validate/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/validate.js" charset="UTF-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery.metadata.js"></script>
function doSubmit() {
validateForm()
}