使用jquery validate表单验证插件

最新推荐文章于 2023-08-15 22:21:38 发布

逍遥不羁

最新推荐文章于 2023-08-15 22:21:38 发布

阅读量935

点赞数

分类专栏： jquery validate 文章标签： jquery validate

本文链接：https://blog.csdn.net/javaloveiphone/article/details/53760466

版权

jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

validate

1 篇文章 0 订阅

订阅专栏

一、jquery validate的官方演示和文档地址：

官方网站：http://jqueryvalidation.org/
官方演示：http://jqueryvalidation.org/files/demo/
官方文档：http://jqueryvalidation.org/documentation/
插件包下载：http://download.csdn.net/detail/javaloveiphone/9716204

二、使用jquery validate

1、引入插件：

<script src="/js/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/js/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/js/validate/additional-methods.js" type="text/javascript"></script>
<script src="/js/validate/messages_zh.js" type="text/javascript"></script>

注：

validate基于jquery库，此处使用jquery-1.8.3.js版本

jquery.validate.js作为validate表单验证插件的核心被引入

additional-methods.js用于扩展自定义验证方法

messages_zh.js为提示信息国际化文件，用于扩展中文提示信息

2、页面表单：

<form id="rfm" action="" method="post">
            <!--个人信息-->
            <div class="reg-info-item">
                <div class="form-box">
                    <ul class="cinfo clearfix">
                        <li>
                            <label><em>*</em>姓：</label>
                            <input id="familyName" type="text" class="form-control" name="familyName">
                        </li>
                        <li>
                            <label><em>*</em>名：</label>
                            <input id="firstName" type="text" class="form-control" name="firstName">
                        </li>
                       <li>
                            <label><em>*</em>证件类型：</label>
                            <select class="form-control" name="userSub.cardType">
                                <option value="身份证">身份证</option>
                            </select>
                       </li>
                       <li>
                            <label><em>*</em>证件号码：</label>
                            <input id="identityCard" type="text" class="form-control" name="userSub.cardNo">
                        </li>
                        <li>
                            <label><em>*</em>性别：</label>
                            <input type="radio" name="userSub.gender" checked value="0">男
                            <input type="radio" name="userSub.gender" value="1">女
                        </li>
                        <li>
                            <label><em>*</em>出生日期：</label>
                            <input id="date" type="text" class="form-control" name="userSub.birthday">
                        </li>

                    </ul>
                </div>
            </div>

            <div class="reg-info-item">
                <div class="form-box">
                    <ul class="cinfo clearfix">
                        <li>
                            <label><em>*</em>手机号码：</label>
                            <input id="mobile" type="text" class="form-control" name="mobile">
                        </li>
                        <li>
                            <label><em>*</em>邮箱：</label>
                            <input id="email" type="text" class="form-control" name="email">
                        </li>
                        <li>
                            <label>其他电话：</label>
                            <input type="text" class="form-control" name="telphone">
                        </li>
                        <li>
                            <label>邮编：</label>
                            <input type="text" class="form-control" name="userSub.zipCode">
                        </li>
                        <li class="col-12">
                            <label><em>*</em>通讯地址：</label>
                            <input type="text" class="form-control" name="userSub.address">
                        </li>
                    </ul>
                </div>
            </div>

            <div class="reg-info-item">
                <div class="form-box">
                    <ul class="cinfo clearfix">
                        <li>
                            <label><em>*</em>开户人：</label>
                            <input id="userSubAccount" type="text" class="form-control" name="userSub.account" readonly="readonly">
                        </li>
                        <li>
                            <label><em>*</em>银行卡号：</label>
                            <input type="text" class="form-control" name="userSub.bankCard">
                        </li>
                        <li>
                            <label><em>*</em>银行名称：</label>
                            <input type="text" class="form-control" name="userSub.bankName">
                        </li>
                        <li>
                            <label><em>*</em>开户行名称：</label>
                            <input type="text" class="form-control" name="userSub.openingName">
                        </li>
                    </ul>
                </div>
            </div>

            <div class="reg-info-item">
                <div class="form-box">
                    <ul class="cinfo clearfix upload">
                        <li>
                            <label><em>*</em>身份证正面：</label>
                            <div class="btn-upload">
                                <input id="identityPaper1" class="js_upFile_A" type="file" name="uploadFileName" data-role="none">
                                <input id="identityPaper1_hidden" type="hidden" name="userSub.identityPaper1">
                                <!-- <input id="identityPaper1_real_hidden" type="hidden" name="userSub.realIdentityPaper1"> -->
                                <div class="js_showBox" ></div>
                            </div>
                        </li>
                        <li>
                            <label><em>*</em>身份证反面：</label>
                            <div class="btn-upload">
                                <input id="identityPaper2" class="js_upFile_B" type="file" name="uploadFileName" data-role="none">
                                <input id="identityPaper2_hidden" type="hidden" name="userSub.identityPaper2">
                                <!-- <input id="identityPaper2_real_hidden" type="hidden" name="userSub.realIdentityPaper2"> -->
                                <div class="js_showBox" ></div>
                            </div>
                        </li>
                        <li>
                            <label><em>*</em>银行卡：</label>
                            <div class="btn-upload">
                                <input id="bankCardAttach" class="js_upFile_Card" type="file" name="uploadFileName" data-role="none">
                                <input id="bankCardAttach_hidden" type="hidden" name="userSub.bankCardAttach">
                                <!-- <input id="bankCardAttach_real_hidden" type="hidden" name="userSub.realBankCardAttach"> -->
                                <div class="js_showBox" ></div>
                            </div>
                        </li>
                        <li>
                            <label>其他资料：</label>
                            <div class="btn-upload">
                                <input id="otherAttach" class="js_upFile_other" type="file" name="uploadFileName" data-role="none">
                                <input id="otherAttach_hidden" type="hidden" name="userSub.otherAttach">
                                <!-- <input id="otherAttach_real_hidden" type="hidden" name="userSub.realOtherAttach"> -->
                                <div class="js_showBox" ></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="reg-info-item">
                <div class="form-box">
                    <ul class="cinfo clearfix">
                        <li>
                            <label><em>*</em>手机号码：</label>
                            <span id="phoneNum"></span>
                            <input type="button" class="send" onclick="Register.getMobileCode(this,'#phoneNum');" value="获取验证码">
                        </li>
                        <li>
                            <label><em>*</em>手机验证码：</label>
                            <input id="mobileCode" type="text" class="form-control" name="mobileCode">
                        </li>
                        <li>
                            <label><em>*</em>登录密码：</label>
                            <input id="userPassword" type="password" class="form-control" name="userPassword">
                        </li>
                        <li>
                            <label><em>*</em>确认密码：</label>
                            <input id="confirm_password" type="password" class="form-control" name="confirm_password">
                        </li>

                    </ul>
                </div>
            </div>

            <div class="submit_btn">
                <!-- 触发处理validate 提交验证的方法submitHandler，
                需使用type="submit"，此处用a标签方式触发提交，
                submit方法内部调用隐藏的input type="submit"的click事件，实现submitHandler提交验证 -->
                <a href="javascript:;" onclick="submit('submitId');">提交申请</a>
                <input type="submit" style="display:none" id="submitId" />
            </div>
    </form>

3、添加validate验证：

(function(){

$("#rfm").validate({
                rules : { "familyName" : { required : true, maxlength : 50 }, "firstName" : { required : true, maxlength : 50 }, "userSub.cardNo" : { required : true, identityCard : true, //唯一性验证 backstageUrl : [rootPath+"/register/backstageUrl/card_no/","#identityCard","身份证号已被占用"] }, "userSub.birthday" : { required : true, dateISO:true }, "mobile" : { required : true, mobilePhone : true, //唯一性验证 backstageUrl : [rootPath+'/register/backstageUrl/mobile',"#mobile","手机号已被占用"] }, "email" : { required : true, email : true, //唯一性验证 backstageUrl : [rootPath+"/register/backstageUrl/email/","#email","邮箱已被占用"] }, "telphone" : { telphone : true }, "userSub.zipCode" : { zipCode : true }, "userSub.address" : { required : true, maxlength : 128 }, "userSub.bankCard" : { required : true, luhmCheck:true }, "userSub.bankName" : { required : true, maxlength : 50 }, "userSub.openingName" : { required : true, maxlength : 100 }, "userSub.identityPaper1":{ required : true }, "userSub.identityPaper2":{ required : true }, "userSub.bankCardAttach":{ required : true }, "userSub.otherAttach":{ required : true }, mobileCode : { required : true, checkMobileCode : [rootPath+"/register/checkMobileCode/",["#mobile","#mobileCode"],"验证码错误或过期"] }, userPassword : { required : true, minlength : 6 }, confirm_password : { required : true, minlength : 6, equalTo : "#userPassword" } },
                messages : { familyName : { required : "请输入您的姓氏" }, firstName : { required : "请输入您的名字" }, userPassword : { required : "请输入密码", minlength : $.validator.format("密码长度不能小于{0}位")//"密码长度不能小于6位" }, confirm_password : { required : "请输入确认密码", minlength : $.validator.format("密码长度不能小于{0}位"),//"密码长度不能小于6位" equalTo : "两次密码输入不一致" } },
                //提交处理方法
                submitHandler: function(){ var arr = [{"id":"identityPaper1_hidden","msg":"身份证正面图片"},{"id":"identityPaper2_hidden","msg":"身份证反面图片"},{"id":"bankCardAttach_hidden","msg":"银行卡图片"}]; var filterArr = arr.filter(function(item,index,array){ return $("#"+item.id).val() == ""; }); if(filterArr.length==0){ $.ajax({ url:rootPath+"/register/submit", data:$("#rfm").serialize(), dataType:"json", type:"post", success:function(data){ if(data.success){ window.location.href = rootPath+"/register/succeed"; //$.post(rootPath+"/register/succeed",{user:data.data},function(){});  }else{ alert(data.resultMessage); } }, error:function(){ alert("提交失败"); } }); }else{ var msg = ""; filterArr.forEach(function(item,index,array){ msg = msg + item.msg + ","; }); if(msg && msg.lastIndexOf(",") != -1){ msg = msg.substring(0,msg.lastIndexOf(",")); } alert("请上传："+msg); } }
            });

submit = function(id){
            $("#"+id).click();
        }
});

4、additional-methods.js添加自定义验证方法：backstageUrl

/**
 * backstageUrl param=[url,"#id","tip message"]  
 */
$.validator.addMethod("backstageUrl", function(value, element,param) {
    var flag = true;
    if(this.optional(element)){
        flag = this.optional(element);
    }else{
        var eleId = param[1],url = param[0],val = $(eleId).val();
        $.ajax({
            type:"POST",
            url:url,
            async:false,
            dataType:"json",
            data:{val:val},
            success:function(data){
                if(data.success == true){
                    var result = data.data.result;
                    if(result == 1){
                        flag = false;
                        //动态添加验证信息
                        $.validator.messages.backstageUrl = param[2];
                    }
                }else{
                    flag = false;
                }
            },
            error:function(){
                flag = false;
            }

        });
    }

    return flag;

}, "请修正此字段");

5、修改验证提示信息，修改国际化文件messages_zh.js

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值"), bankaccountNL: "请输入有效的银行卡号", //添加自定义验证 backstageUrl: $.validator.format("{2}"), checkMobileCode: $.validator.format("{2}") });

}));

6、参考：
http://www.51xuediannao.com/js/jquery/jquery_validate/
http://blog.sina.com.cn/s/blog_4acbd39c0100qtlh.html

逍遥不羁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery validate表单验证插件

一、jquery validate的官方演示和文档地址：官方网站：http://jqueryvalidation.org/ 官方演示：http://jqueryvalidation.org/files/demo/ 官方文档：http://jqueryvalidation.org/documentation/二、使用jquery validate1、引入插件：<script src="/js/jq
复制链接

扫一扫

专栏目录