2020年3月25日

表单validate.js判断,file转base64,ajax提交代码


表单validate.js判断,file转base64,ajax提交代码

<script type=”text/javascript” src=”js/jquery-1.9.1.min.js”></script>
<script src=”js/layer.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript” src=”js/jquery.validate_layermsg.js”></script>
<script src=”js/messages_zh.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”js/jquery.form.min.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>

var pzqd_base64 = “”;
var jszb_base64 = “”;

function getFileName(o){
var pos=o.lastIndexOf(“\\”);
return o.substring(pos+1);
}
$(‘.upfile’).change(function(){
//jquery获取input file文件名
var obj = $(this);
var file = $(‘.upfile’).val();

var fileName = getFileName(file);

//base64
var file = $(this)[0].files[0];
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
var base64Data = reader.result.replace(/^data:image\/\w+;base64,/, “”);

//console.log(base64Data);
//console.log(obj.attr(“name”));
if(obj.attr(“name”)==”pzqd”){
pzqd_base64 = base64Data;
}
if(obj.attr(“name”)==”jszb”){
jszb_base64 = base64Data;
}
}

$(this).parents(‘.file-box-wrap’).addClass(‘on’);
$(this).parents(‘.file-box-wrap’).find(‘.file-txt’).html(fileName);
$(this).parents(‘.file-box-wrap’).find(‘button’).html(‘重新上传’);

})

$(‘input[name=cgdw]’).click(function(){
layer.open({
type: 1,
content:$(‘#m-cgdw’),
title:false,
btn: false,
shadeClose:true,
area: [‘90%’, ‘auto’],
});
})

$(‘.m-cgdw li’).click(function(){
$(this).addClass(‘on’).siblings().removeClass(‘on’);
$(‘input[name=cgdw]’).val($(this).html());
layer.closeAll();

})

jQuery.validator.addMethod(“isMobile”, function(value, element) {
var length = value.length;
var mobile = /^1(3|4|5|7|8)\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, “请正确填写您的手机号码”);

$(“#validateForm”).validate({
//debug: true, //调试模式取消submit的默认提交功能
//errorClass: “label.error”, //默认为错误的样式类为:error
focusInvalid: false, //当为false时,验证无效时,没有焦点响应
onfocusout: function(element) { $(element).valid(); },
onkeyup: function(element) { $(element).valid(); } ,
rules: {
xmlx: {
required: true,
},
xmmc: {
required: true,
},
cgdw: {
required: true,
},
xmys: {
required: true,
},
biz: {
required: true,
},
whjsfs: {
required: true,
},
mfzbq: {
required: true,
},
dhts: {
required: true,
},
zcyxts: {
required: true,
},
xyyffs: {
required: true,
},
jsfwcn: {
required: true,
},
wmhth: {
required: true,
},
pzqd: {
required: true,
},
jszb: {
required: true,
},
beiz: {
required: true,
},
cg_xm: {
required: true,
},
cg_sjh: {
required: true,
isMobile:true,
},
cg_yx: {
required: true,
email: true,
},
gh_gsmc: {
required: true,
},
gh_zh: {
required: true,
},
gh_khh: {
required: true,
},
gh_zcdz: {
required: true,
},
gh_lxr: {
required: true,
},
gh_sjh: {
required: true,
isMobile:true,
},
gh_yx: {
required: true,
email: true,
},
dl_gsmc: {
required: true,
},
dl_zh: {
required: true,
},
dl_khh: {
required: true,
},
dl_zcdz: {
required: true,
},
dl_lxr: {
required: true,
},
dl_sjh: {
required: true,
isMobile:true
},
dl_yx: {
required: true,
email: true,
},

},
messages: {
xmlx: {
required: “请选择项目类型”,
},
xmmc: {
required: “文本框必填”,
},
cgdw: {
required: “弹窗选择必选”,
},
xmys: {
required: “数字框必填”,
},
biz: {
required: “下拉框必选”,
},
whjsfs: {
required: “下拉框必选”,
},
mfzbq: {
required: “数字框必填”,
},
dhts: {
required: “数字框必填”,
},
zcyxts: {
required: “数字框必填”,
},
xyyffs: {
required: “数字框必填”,
},
jsfwcn: {
required: “文本框必填”,
},
wmhth: {
required: “文本框必填”,
},
pzqd: {
required: “上传doc文件”,
},
jszb: {
required: “上传doc文件”,
},
beiz: {
required: “文本框必填”,
},
cg_xm: {
required: “文本框必填”,
},
cg_sjh: {
required: “手机号必填”,
isMobile:”手机号格式错误”,
},
cg_yx: {
required: “文本框必填邮箱校验”,
email: “邮箱格式错误”,
},
gh_gsmc: {
required: “文本框必填”,
},
gh_zh: {
required: “文本框必填”,
},
gh_khh: {
required: “文本框必填”,
},
gh_zcdz: {
required: “文本框必填”,
},
gh_lxr: {
required: “文本框必填”,
},
gh_sjh: {
required: “文本框必填”,
isMobile:”手机号格式错误”,
},
gh_yx: {
required: “文本框必填邮箱校验”,
email: “邮箱格式错误”,
},
dl_gsmc: {
required: “文本框必填”,
},
dl_zh: {
required: “文本框必填”,
},
dl_khh: {
required: “文本框必填”,
},
dl_zcdz: {
required: “文本框必填”,
},
dl_lxr: {
required: “文本框必填”,
},
dl_sjh: {
required: “文本框必填手机号校验”,
isMobile:”手机号格式错误”,
},
dl_yx: {
required: “文本框必填邮箱校验”,
email: “邮箱格式错误”,
},
},
errorPlacement : function(error, element) {
//element.parent().find(‘.err’).html(error);
error.appendTo(element.parent());
//element.parent().addClass(‘perr’);
element.parents(“.m-form1-r”).addClass(‘perr’);
},
errorPlacement : function(error, element) {

if(element.is(“:file”)){
error.appendTo(element.parents(“.file-box-wrap”));

}
else{
error.appendTo(element.parent());
element.parents(“.m-form1-r”).addClass(‘perr’);
}
},
submitHandler: function(form){
//提示
layer.msg(‘提交表单’);

//var formData = $(“form”).serialize();
var form = $(‘#validateForm’)[0];
var formData = new FormData(form);
//formData.append(“token”,”asdfasdf”);

//打印base64文件值
formData.set(“pzqd”,pzqd_base64);
formData.set(“jszb”,jszb_base64);

// $.ajax({
// type : “POST”,
// url : “houtai/123.do”,
// data : formData,
// async: false,
// cache: false,
// contentType: false,
// processData: false,
// success : function(msg) {
// if(msg){
// alert(‘提交成功!’);
// }
// }
// });
//form.submit();
},
});

</script>

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732