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\-\.]+@([\-_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 }); });
以上为生成动态表单,以及为动态表单元素添加验证规则。