随笔记录一些简单的内容
一些简单的验证:
if (!$('#name').val()) {
toastr.warning('请填写姓名')
return false
}
var email = $('#email').val()
var reg = /^([a-zA-Z]|[0-9])(\w|\-|\.)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!email || !reg.test(email)) {
toastr.warning('请填写正确的邮箱格式')
return false
}
获取表单提交的内容:
var data = $('#issue-submit').serializeArray();
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。
**注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果## 标题value 不为空的话)。举例来说:
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]**
获取对应的url字段
var problemStr = '';
for (var key in problem) {
problemStr += problem[key]+',';
}
if (problemStr != '') {
problemStr = problemStr.substr(0,problemStr.length-1)
data.push({name:'**issue_file**', value: problemStr})
}
*加粗部分是要传给后台的字段*
Ajax提交:
$.post(MyAjax.ajaxurl, data, function (res) {
res = JSON.parse(res);
console.log(res,'3')
if (res && res.result_code == 1) {
toastr.success('操作成功,3s后自动跳回首页')
setTimeout(function () {
window.location.href = 'http://wordpress.qeebu.cn/'
}, 3000)
} else {
toastr.error('操作失败');
flag = false;
}
})
加锁(防止表单重复提交)
if (flag) {
return false;
}
flag = true;
获得想要数据的url
var problem = {};
function addArr(varname,id,url) {
varname[id] = url
}
删除数组中不要的值
function removeFile(id,varname) {
// delete problem[id];
delete varname[id];
// console.log(problem)
$('#'+id).remove();
}
完整的代码示例
//问题截图
if (typeof plupload != "undefined") {
var uploaderproblem = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'pickfiles-problem',
container: document.getElementById('container-problem'),
url: ajaxurl,
flash_swf_url: '../js/Moxie.swf',
silverlight_xap_url: '../js/Moxie.xap',
multi_selection: true,
filters: {
max_file_size: '10mb',
mime_types: [
{title: "jpg,png,jpeg,doc,docx,xls,ppt,conf,txt,log,xlsx,pptx,mp4,swf", extensions: "jpg,png,jpeg,doc,docx,xls,ppt,conf,txt,log,xlsx,pptx,mp4,swf"}/*,
{title : "Zip files", extensions : "zip"}*/
]
},
init: {
PostInit: function () {
document.getElementById('filelist-problem').innerHTML = '';
},
FilesAdded: function (up, files) {
plupload.each(files, function (file) {
// console.log(file)
**这段是循环插入li标签**
**id = file.id**
**html = $("#filelist-problem").html();
html += '<li class="extraADD" id="' + file.id + '">' + file.name + ' <span **onclick="removeFile(\''+id+'\',problem)"** class="glyphicon glyphicon-trash"></span></li>';
**加粗部分是点击这个按钮,同时删除数组中的数据和界面上的对应内容**
$("#filelist-problem").html(html)**
});
uploaderproblem.start();
},
BeforeUpload: function (up, file) {
//重点在这里,上传的时候自定义参数信息
uploaderproblem.setOption("multipart_params", {"action": "custom_upload"});
},
// UploadProgress: function (up, file) {
// document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
// },
FileUploaded: function (up, file, info) {
res = info.response
res = JSON.parse(res)
**调用下面的addArr方法增加相应的数组**
**addArr(problem,file.id,res.data.url)**
$('#cover-input').val(res.data.url)
$('#cover-img').attr('src', res.data.url)
// officialLetter = {name:file.name,url:JSON.parse(info.response).url};
$('#pickfilesText-problem').text('重新上传');
}
}
});
uploaderproblem.init();
}
一些总结## 标题
1.表单提交是要注意相应字段