码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 的 validator 验证动态添加的信息

时间:2018-04-04 18:03:38      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:timeout   format   lin   date   require   lis   index   字段   json   

    jQuery.validator.addMethod("checkChannelName", function (value, element) {
        var returnVal = false;
        var id = $(‘input[name="channelId"]‘).val();
        if (value != ‘‘) {
            $.ajax({
                url: ‘{:U("TourChannel/checkChannelName")}‘,
                data: {name: value, id: id},
                async : false,
                type: ‘POST‘,
                success: function (data) {
                    if (data.code == ‘10000‘) {
                        returnVal = true;
                    } else {
                        $("input[name=‘name‘]").val("");
                    }
                },
                error: function (xhr) {
                    $("input[name=‘name‘]").val("");
                    alert(‘动态页有问题!\n‘ + xhr.responseText);
                }
            });
        }
        return returnVal;
    }, ‘该渠道中文名已被使用,请重新输入‘);
    jQuery.validator.addMethod("isZH", function(value, element) {
        var pattern = /^[\u4e00-\u9fa5]+$/;
        return this.optional(element) || (pattern.test(value));
    }, "只能是中文字符");
    jQuery.validator.addMethod("isZHPunc", function(value, element) {
        var pattern = /^[\u4e00-\u9fa5]|[\(\)\《\》\——\;\,\。\“\”\<\>\!]$/;
        return this.optional(element) || (pattern.test(value));
    }, "只能是中文字符和标点符号");
    jQuery.validator.addMethod("isEnglish", function(value, element) {
        var pattern = /^[A-Za-z]+$/;
        return this.optional(element) || (pattern.test(value));
    }, "只能是英文字符");
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var pattern = /^(\d{3,4}-?)?\d{7,9}$/g;
        return this.optional(element) || (pattern.test(value));
    }, "电话号码格式不正确");
    jQuery.validator.addMethod("isTel", function(value, element) {
        var pattern = 	/^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (pattern.test(value));
    }, "手机号码格式不正确");
    jQuery.validator.addMethod("isEmail", function(value, element) {
        var pattern = 	/^[_a-zA-Z0-9\-\.]+@([\-_a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,3}$/;
        return this.optional(element) || (pattern.test(value));
    }, "邮箱格式不正确");

  以上为自定义添加验证规则。

    $("#form-channel-add").validate({
        rules: {
            name: {
                required: true,
                checkChannelName: true,
                isZH:true,
                maxlength:30
            },
            en_name: {
                required: true,
                maxlength:100,
                isEnglish:true
            },
            web: {
                required: true,
                maxlength:100
            },
            main: {
                required: true,
                isZHPunc:true,
                maxlength:100
            },
            order_way: {
                required: true,
                maxlength:200,
                isZHPunc:true
            },
            contract_no: {
                required: true
            },
            channel_people: {
                required: true
            },     
            channel_position: {
                required: true
            },
            channel_tel: {
                required: true
            },
            channel_phone: {
                required: true
            }
        },
        messages: {
            name: {
                required: "该字段不能为空",
                maxlength:"最大为30个字符"
            },
            en_name: {
                required: "该字段不能为空",
                maxlength:"最大为100个字符"
            },
            web: {
                required: "该字段不能为空",
                maxlength:"最大为100个字符"
            },
            main: {
                required:"该字段不能为空",
                maxlength:"最大为100个字符"
            },
            order_way: {
                required: "该字段不能为空",
                maxlength:"最大为200个字符"
            },
            contract_no: {
                required: "该字段不能为空"
            }
            //product_id: {required: "产品编号不能为空!", remote: jQuery.format("产品编号不存在")}
        },
        onkeyup: false,
        focusCleanup: true,
        success: "valid",
        errorPlacement:function(error, element){
            error.appendTo(element.parent());
        },
        unhighlight:function(element, errorClass, validClass){

        },
        submitHandler: function (form) {
            $(form).ajaxSubmit({
                type: ‘post‘, // 提交方式 get/post
                url: ‘{:U("addAndEdit")}‘, // 需要提交的 url
                beforeSubmit:function(data){
                    for(var i = 0; i < data.length; i++){
                        if(data[i].name.indexOf("channel_people") >= 0){
                            data[i].name = "channel_people[]";
                        }
                        if(data[i].name.indexOf("channel_position") >= 0){
                            data[i].name = "channel_position[]";
                        }
                        if(data[i].name.indexOf("channel_tel") >= 0){
                            data[i].name = "channel_tel[]";
                        }
                        if(data[i].name.indexOf("channel_phone") >= 0){
                            data[i].name = "channel_phone[]";
                        }
                        if(data[i].name.indexOf("channel_email") >= 0){
                            data[i].name = "channel_email[]";
                        }
                    }
                },
                success: function (data) { // data 保存提交后返回的数据,一般为 json 数据
                    if (data.code == 10000) {
                        layer.msg(data.data.data, {icon: 1, time: 5000});
                        setTimeout(function () {
                            window.location.href=data.data.url;
                            // var index = parent.layer.getFrameIndex(window.name);
                            // parent.layer.close(index);
                        }, 1000);
                    } else {
                        layer.msg(data.data.data, {icon: 2, time: 2000});
                    }
                },
                error: function () {
                    layer.msg(‘未知错误!‘, {icon: 2, time: 2000});
                }
            });
            return false;
        }
    });

  以上为表单提交,验证方法。

    //添加联系人
    $("#addPeople").click(function(){
        var userIndex = $(".user-info-box").length;
        var html = ‘‘;
        html+=‘<div class="col-xs-12 col-sm-12 user-info-box">‘;
        html+=‘<div class="line mt-10"></div>‘;
        html+=‘    <div class="col-xs-12 col-sm-6 mt-10">‘;
        html+=‘        <div class="row cl">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>渠道联系人:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_people[]‘+userIndex+‘" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>渠道联系人职位:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_position[]‘+userIndex+‘" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>渠道联系人电话:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_tel[]‘+userIndex+‘" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>渠道联系人手机:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_phone[]‘+userIndex+‘" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3">微信:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_wx[]" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3">QQ:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_qq[]" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3">邮箱:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <input type="text" name="channel_email[]‘+userIndex+‘" class="input-text radius">‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘        <div class="row cl mt-5">‘;
        html+=‘            <label class="form-label col-xs-4 col-sm-3">其他:</label>‘;
        html+=‘            <div class="formControls col-xs-8 col-sm-9">‘;
        html+=‘                <textarea name="channel_other[]" class="textarea"></textarea>‘;
        html+=‘            </div>‘;
        html+=‘        </div>‘;
        html+=‘    </div>‘;
        html+=‘    <div class="col-xs-12 col-sm-6 mt-10">‘;
        html+=‘        <span class="delPeople btn btn-danger radius" style="cursor:pointer;">-</span>‘;
        html+=‘    </div>‘;
        html+=‘</div>‘;
        $(this).parent().before(html);
        $(‘input[name="channel_people[]‘+userIndex+‘"]‘).rules("add", {
            required: true,
            isZH:true,
            minlength:2,
            maxlength:6,
            messages: {
                minlength:"最少2个中文汉字",
                maxlength:"最多6个中文汉字"
            }
        });
        $(‘input[name="channel_position[]‘+userIndex+‘"]‘).rules("add", {
            required: true,
            isZH:true,
            minlength:2,
            maxlength:6,
            messages: {
                minlength:"最少2个中文汉字",
                maxlength:"最多6个中文汉字"
            }
        });
        $(‘input[name="channel_tel[]‘+userIndex+‘"]‘).rules("add", {
            required: true,
            isPhone:true
        });
        $(‘input[name="channel_phone[]‘+userIndex+‘"]‘).rules("add", {
            required: true,
            isTel:true,
            minlength:11,
            maxlength:11,
            messages: {
                minlength:"只可输入11位数字",
                maxlength:"只可输入11位数字"
            }
        });
        $(‘input[name="channel_email[]‘+userIndex+‘"]‘).rules("add", {
            isEmail:true
        });
    });

  以上为生成动态表单,以及为动态表单元素添加验证规则。

jQuery 的 validator 验证动态添加的信息

标签:timeout   format   lin   date   require   lis   index   字段   json   

原文地址:https://www.cnblogs.com/xie-xiao-chao/p/8717902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!