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

    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\-\.][email protected]([\-_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
        });
    });

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

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

时间: 2024-09-29 13:38:52

jQuery 的 validator 验证动态添加的信息的相关文章

Jquery获取select option动态添加自定义属性值失效

Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/39096/390963333.html 为了帮助网友解决“Jquery获取select optio”相关的问题,中国学网通过互联网对“Jquery获取select optio”相关的解决方案进行了整理,用户详细问题包括:jqueryselectie9  function GetFenceItemData(

jQuery实现表单动态添加与删除数据操作示例

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>用户名注册</title>   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script&g

jQuery对 动态添加 的元素 绑定事件(on()的用法)

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 1 <div id="testdiv"> 2 <ul></ul> 3 </div> 需要给<ul>里面动态添加的

如何获取jQuery中动态添加的元素

一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

如何使用validate.js进行动态添加和移除表单验证信息

表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}});// 移除 $("#addConnectUs

jQuery.validator 验证规则详解

前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.validator 验证规则 一.在元素的class属性中添加需要验证的规则,多个规则以空格隔开 <label>邮箱:</label> <input class="required email" type="text" name="ema

使用动态代理解决方法调用前后添加日志信息

一般情况,在每个调用的方法中直接添加日志信息,存在如下问题: 1.代码混乱:越来越多的非业务需求加入(如日志和验证等)后,原有的业务方法急剧膨胀,每个方法在处理核心逻辑的同时还必须兼顾其他多个关注点: 2.代码分散:以日志需求为例,只是为了满足这个单一的需求,就不得不在多个模块里多次重复相同的日志代码,如果日志需求发生变化,必须修改所有的模块. 针对以上问题,使用动态代理带解决. 代理设计模式的原理:使用一个代理将对象包装起来,然后用该代理取代原始对象.任何原始对象的调用都要通过代理.代理对象决

使用tooltip显示jquery.validate.unobtrusive验证信息

通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = "纬度")] [Required(ErrorMessage = "{0}不能为空")] [RegularExpression(@"^\-?\d+(\.\d+)?$", ErrorMessage = "{0}格式不正确,请输入数值")] [R