本文介绍了一个使用jQuery实现的表单验证方法及动态表单生成过程，包括自定义验证规则如中文字符检查、邮箱格式等，并通过AJAX进行服务器端验证，确保数据的有效性和正确性。
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
});
});
以上为生成动态表单，以及为动态表单元素添加验证规则。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
