jQuery的validation插件(验证表单插件)

更完整的参考: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>&nbsp;&nbsp;
                                <a href="#"><font>注册</font></a>&nbsp;&nbsp;
                                <a href="#"><font>购物车</font></a>&nbsp;&nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!--2.导航部分-->
            <tr height="50px">
                <td bgcolor="black" >
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;
                    <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;
                    <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;
                    <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 保存大修信息*** */

posted @ 2017-08-25 17:54 QiaoZhi 阅读(790) 评论(0) 编辑收藏举报

刷新页面返回顶部

Qiao_Zhi

有远大抱负的人不可忽略眼前的工作!!!

jQuery的validation插件(验证表单插件)

更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html

公告