更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html
验证隐藏字段的使用(验证通过后ajax提交表单):http://www.cnblogs.com/qlqwjy/p/7498773.html
ajax验证以及验证隐藏字段参考:http://www.cnblogs.com/qlqwjy/p/7498773.html
一款优秀的表单验证插件——validation插件
特点：
l 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
l 自定义验证规则：可以很方便的自定义验证规则
l 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
l 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
快速入门：
第一步：引入jquery库和validation插件
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>完整的表单验证</title> <style type="text/css"> /*validate中不成功显示的样式设置*/ label.error{ background:url(../img/unchecked.gif) no-repeat 10px 3px; padding-left: 30px; font-family:georgia; font-size: 15px; font-style: normal; color: red; } label.success{ background:url(../img/checked.gif) no-repeat 10px 3px; padding-left: 30px; } </style> <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/messages_zh.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#regForm").validate({ rules:{ username:{ required:true, minlength:6, maxlength:16 }, password:{ required:true, digits:true, rangelength:[2,8] }, password2:{ required:true, equalTo:"[name='password']" }, Email:{ required:true, email:true }, realName:{ required:true, minlength:6, maxlength:16 }, sex:{ required:true } }, messages:{ username:{ required:"用户名不能为空", minlength:"最少六位", maxlength:"最长16位" }, password:{ required:"密码不能为空", digits:"必须为数字", rangelength:"长度为2-8位" }, password2:{ required:"确认密码不能为空", equalTo:"两次密码不一致" }, Email:{ required:"邮箱不能为空", email:"邮箱格式不正确" }, realName:{ required:"名字不能为空", minlength:"最短6位", maxlength:"最长16位" }, sex:{ required:"性别必须选" } }, errorElement: "label", //用来创建错误提示信息标签 success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签label label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); }) </script> </head> <body> <table align="center" width="1200px"> <!--1.介绍部分--> <tr> <td> <table border="1px" cellspacing="0px" cellpadding="0px" width="1200px"> <tr height="50px"> <td width="33.3%" height="47px"><img src="../img/logo2.png" /></td> <td width="33.3%" height="47px"><img src="../img/header.png"/></td> <td width="33.3%" height="47px"> <a href="#"><font>登陆</font></a> <a href="#"><font>注册</font></a> <a href="#"><font>购物车</font></a> </td> </tr> </table> </td> </tr> <!--2.导航部分--> <tr height="50px"> <td bgcolor="black" > <a href="#"><font size="5" color="white">首页</font></a> <a href="#"><font color="white">手机数码</font></a> <a href="#"><font color="white">电脑办公</font></a> <a href="#"><font color="white">家用电器</font></a> </td> </tr> <!--3.注册表单--> <tr height="500px"> <td background="../img/regist_bg.jpg" align="center"> <form action="#" method="get" name="regForm" onsubmit="return checkForm()" id="regForm"> <table border="1px" width="600px" height="400px" bgcolor="white "> <tr> <td colspan="2" height="40px">会员注册 USER REGISTER </td> </tr> <tr> <td>用户名：</td> <td><input type="text" id="username" name="username" value="" placeholder="请输入用户名" /></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" id="password" placeholder="请输入密码" /></td> </tr> <tr> <td>确认密码：</td> <td><input type="text" name="password2" id="password2" placeholder="请输入密码" /></td> </tr> <tr> <td>Email：</td> <td><input type="text" name="Email" id="Email" placeholder="请输入邮箱" /></td> </tr> <tr> <td>姓名：</td> <td><input type="text" name="realName" id="realName" placeholder="请输入姓名" /></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <label for="sex" class="error" style="display: none;"></label> </td> </tr> <tr> <td>出生日期：</td> <td><input type="text" name="" value="" placeholder="请输入出生日期" /></td> </tr> <tr> <td>验证码：</td> <td><input type="text" name="" value="" placeholder="请输入验证码" /> <img src="../img/yanzhengma.png"/> </td> </tr> <tr> <td colspan="2"><input type="submit" value="提交" /></td> </tr> </table> </form> </td> </tr> <!--4.脚本--> <tr> <td width="100%"><img src="../img/footer.jpg" width="100%"/></td> </tr> <!--5.友情链接--> <tr align="center"> <td> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> <!--水平分割线标签--> <hr /> <font>Copyright © 2005-2016 传智商城 版权所有 </font> </td> </tr> </table> </body> </html>
结果:
-----------------------插件部署在tomcat上 成功后的图标不显示，只能给text值才能显示（清空值后不显示背景图片）。也有可能是版本问题------------------------------
验证的JS
$(function() { $("#addform").validate({ rules : { name : { required : true }, xinghao : { required : true }, address : { required : true }, department : { required : true }, unit : { required : true }, number : { required : true, number : true }, price : { required : true, number : true }, totalprice : { required : true, number : true }, come : { required : true, }, buytime : { required : true, }, useperson : { required : true, }, handleperson : { required : true, }, admini : { required : true, } }, messages : { name : { required : "名称不能为空" }, xinghao : { required : "型号不能为空" }, address : { required : "地址不能为空" }, department : { required : "部门不能为空" }, unit : { required : "单位" }, number : { required : "数量不能为空", number : "必须为数字" }, price : { required : "单价不能为空", number : "必须为数字" }, totalprice : { required : "总价不能为空", number : "必须为数字" }, come : { required : "来源不能为空" }, buytime : { required : "构建日期不能为空" }, useperson : { required : "使用人不能为空" }, handleperson : { required : "处理人不能为空" }, admini : { required : "管理员不能为空" } }, errorElement : "label", // 用来创建错误提示信息标签 success : function(label) { // 验证成功后的执行的回调函数 // label指向上面那个错误提示信息标签label label.text("正确") // 清空错误提示消息 .addClass("success"); // 加上自定义的success类 } }); })
CSS效果
<style type="text/css"> /*validate中不成功显示的样式设置*/ label.error { background: url(img/unchecked.gif) no-repeat 10px 3px; padding-left: 30px; font-family: georgia; font-size: 15px; font-style: normal; color: red; } label.success { background: url(img/checked.gif) no-repeat 10px 3px; color: blue; padding-left: 30px; } </style>
效果:
注意:验证模态框的数据时，要设置模态框的输入文本框的宽度，否则验证消息会显示在文本框下面:(要在bootstrap的css后面设置，否则会覆盖)
<style type="text/css"> .input-group .form-control { float: left; margin-bottom: 0; position: relative; width: 65%; z-index: 2; } </style>
设置模态框宽度问题:修改div的class为modal-dialog的宽度，例如:
----------------------------------自定义表单验证规则---------------------------------
语法:
addMethod：name, method, message
自定义验证方法
// 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");
注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。
例如:常见的一些验证规则
// 字符验证 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、数字和下划线"); // 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); // 身份证号码验证 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || idCardNoUtil.checkIdCardNo(value); }, "请正确输入您的身份证号码"); //护照编号验证 jQuery.validator.addMethod("passport", function(value, element) { return this.optional(element) || checknumber(value); }, "请正确输入您的护照编号"); // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码"); // 联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话"); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");
注意:有时候自定义的验证规则使用的时候需要加引号，比如 "isPhone":true
比如:
// 联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话"); // 验证并且保存单位信息到数据库 function saveUnit() { var isNotNull = $("#addUnitForm").validate({ ignore : [], rules : { "name" : { required:true },// 发现日期 "address" : { required : true }, "contact" : "required",// 验证文本框的。前边是 name 属性 "phone" : { "isPhone":true, minlength:11, required : true } }, messages : { "name" : { required:"名字不能为空" },// 发现日期 "address" : { required : "地址不能为空" }, "contact" : "联系人不能为空",// 验证文本框的。前边是 name 属性 "phone" : { required : "电话不能为空", minlength : "确认手机不能小于11个字符", "isPhone":"请输入合法的电话号码" } } }); if(isNotNull.form()){ // 验证大修下面是否已经存在对应的单位姓名，如果存在结束方法 if (!validateExistsUnit()) { return; } if (confirm("确认保存单位信息?")) { $.post(contextPath + "/addUnit_addUnit.action",// url $("#addUnitForm").serialize(), // data function(response) { if (response.addResult != null) { alert(response.addResult); } // 添加成功之后重新加载页面 if (response.addResult != null && response.addResult == "添加成功!") { window.location.href=contextPath+'/view/outDepart/outdepartManage.jsp'; } }, 'json') } } }
------------验证带有隐藏域的表单以及ajax提交表单-------------------------------
1.页面引入JS与CSS
<style type="text/css"> /*validate中不成功显示的样式设置*/ label.error { background: url(${baseurl }/controls/validate/unchecked.gif) no-repeat 10px 3px; padding-left: 30px; font-family: georgia; font-size: 15px; font-style: normal; color: red; } label.success { background: url(${baseurl }/controls/validate/checked.gif) no-repeat 10px 3px; padding-left: 30px; } </style> <script src="${baseurl }/controls/validate/jquery.validate.js" type="text/javascript" charset="utf-8"></script> <script src="${baseurl }/controls/validate/messages_zh.js" type="text/javascript" charset="utf-8"></script>
2.JS文件进行验证（通过后提交表单）:
/** *S 保存试卷 */ var saveExam = function() { if (confirm("确认保存试卷并退出?")) { // 进行数据验证 var isNotNull = $("#examForm").validate({ ignore : [], rules : { "exam.paperid" : "required",// 发现日期 "exam.examname" : { required : true }, "exam.address" : "required",// 验证文本框的。前边是 name 属性 "exam.starttime" : "required", "exam.endtime" : { required : true }, "exam.employeename" : { required : true }, "employeeFlag" : "required" }, messages : { "exam.paperid" : { required : "必须选择一份考试试卷" },// 下边与上边对应 "exam.examname" : { required : "考试名称不能为空" }, "exam.address" : "考试地址不能为空",// 验证文本框的。前边是 name 属性 "exam.starttime" : "开始时间不能为空", "exam.endtime" : { required : "结束时间不能为空" }, "exam.employeename" : { required : "创建人不能为空" }, "employeeFlag" : "必须选择参考员工" } }); // 如果验证通过可以提交数据 if (isNotNull.form()) { $.ajax({ url : contextPath + '/exam_addExam.action', data : $("#examForm").serialize(), type : 'POST', dataType : 'json', async : true, success : function(response) { // alert(response.result); if (response.result == '添加成功！') { window.location.href = contextPath + '/view/examParper/exam/examManage.jsp'; } }, error : function() { alert("保存试卷失败！！！") } }); } } } /** *E 保存试卷 */
---------------------验证后调用#form.sublit()提交表单------------------------
数字的验证
// 快速自动生成试卷的验证 var validateQuick = function() { // 进行数据验证 var isNotNull = $("#createPaperForm").validate({ ignore : [], rules : { "exampaper.title" : "required",// 发现日期 "exampaper.level" : { required : true }, "exampaper.paperscore" : { required : true, number : true, min : 20, max : 200 },// 验证文本框的。前边是 name 属性 "exampaper.description" : "required", "exampaper.employeename" : { required : true }, "exampaper.maketime" : { required : true } }, messages : { "exampaper.title" : { required : "试卷标题不能为空" },// 下边与上边对应 "exampaper.level" : { required : "试卷等级不能为空" }, "exampaper.paperscore" : { required : "试卷分数不能为空", number : "请填入数字", min : "最小值是20", max : "最大值是200" }, "exampaper.description" : "试卷描述不能为空", "exampaper.employeename" : { required : "创建人不能为空" }, "exampaper.maketime" : { required : "创建时间不能为空" } } }); // 如果验证通过可以提交数据 if (isNotNull.form()) { $("#createPaperForm").submit();// 提交表单 } }
/***********************ajax异步校验(隐藏域校验)*******************/
首先要引入插件的JS与CSS
form表单的提交应该是ajax异步提交
按钮类型不是submit，应该是button
Form表单:
<form id="addHaulForm"> <div class="modal-body"> <div class="input-group el_modellist" role="toolbar"> <span class="el_spans">大修名称：</span> <input type="text" class="form-control el_modelinput clearAdd" name="bigname" /> </div> <div class="input-group el_modellist" role="toolbar"> <span class="el_spans">大修时间：</span> <input type="text" class="workinput form-control wicon" id="inpstart" name="bigbegindate" readonly> <input type="text" name="bigenddate" class="workinput form-control wicon clearAdd" id="inpend" readonly> </div> <div class="input-group el_modellist" role="toolbar"> <span class="el_spans">大修简介：</span> <textarea name="bigdescription" class="form-control el_modelinput clearAdd" rows="5"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="addNewsSibmitButton()">提交</button> </div> </form>
JS验证:
/** *S 保存大修信息*** */ // 大修创建的提交事件 function addNewsSibmitButton() { // addHaulForm是表单的ID var isNotNull = $("#addHaulForm").validate({ ignore : [], rules : { "bigname" : "required",// 发现日期 "bigbegindate" : { required : true }, "bigenddate" : "required",// 验证文本框的。前边是 name 属性 "bigdescription" : { required : true } }, messages : { "bigname" : { "required" : "名字不能为空" },// 发现日期 "bigbegindate" : { "required" : "开始日期不能为空" }, "bigenddate" : { "required" : "结束日期不能为空" },// 验证文本框的。前边是 name 属性 "bigdescription" : { required : "大修描述不能为空" } } }); if (isNotNull.form()) { if (confirm("确认保存?")) { $.ajax({ url : contextPath + '/addHaul.action', type : "POST", async : true, data : $("#addHaulForm").serialize(), dataType : "json", success : function(response) { alert(response.result) // 添加成功重新加载页面 if (response.result == "添加成功!") { window.location.reload(); } }, error : function() { alert("添加大修失败!!!"); } }); } } } /** *E 保存大修信息*** */
【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】
