form
大约 4 分钟javascript
表单校验
// formValidate 是表单校验的结果，true 表示校验通过
const formValidate = $('#barcode_form').form('validate');
if(!formValidate){
submit
<!--
onsubmit事件是在提交表单时触发
return 一个函数：是指当函数的返回值为false时，表单不提交，为true时提交
mySubmit函数中的参数this是指form调用该函数时会将form传入函数中
-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<input type="text" name="username" >
<input type="submit" name="submit" >
</form>
获取表单数据
获取指定属性
<form action="" method="post">
<input type="text" name="name" id="name" value="aaa">
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="提交" id="submit">
</form>
<script>
var name1 = document.getElementById('name').value; //获取id为name的值
var submit1 = document.getElementById('submit');//获取submit.准备为其绑定事件
submit1.onclick = function(){alert(name1)}//为submit绑定点击事件，将name的值在也页面弹窗显示
</script>
获取form全部数据
// onsubmit事件是在提交表单时触发
// return 一个函数：是指当函数的返回值位false时，表单不提交，为true时提交
// mySumit函数中的参数this是指form调用该函数时会将form传入函数中
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<input type="text" name="username" >
<input type="submit" name="submit" >
</form>
<script>
function mySubmit(form){
<!--定义formData对象-->
let formData = new FormData(form);
<!--利用fromData对象的get方法获取表单数据-->
let username = formData.get('username');
<!--进行一些判断或者操作-->
if(username.length < 5){
alert('用户名不得小于5位');
return false;
}else{
return true;
}
return false;
}
</script>
封装工具获取表单数据
function serializeObject(form) { /*将form表单内的元素序列化为对象，扩展Jquery的一个方法*/
let o = {};
$.each(form.serializeArray(), function (index) {
if (o[this['name']]) {
o[this['name']] = o[this['name']] + "," + this['value'];
} else {
o[this['name']] = this['value'];
}
});
return o;
};
为表单赋值
jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="./jquery.min.js"></script>
<title>演示表单赋值的方法</title>
</head>
<body>
<button onclick="setFormData()">为表单赋值</button>
<form id="form">
<div class="form-group">
<label for="exampleInputEmail1">input</label>
<input type="text" class="form-control" name="input" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">input</label>
<textarea name="textarea">
</textarea>
</div>
<div class="form-group">
<label>select</label>
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="checkbox">
<div>
<label>
<input type="checkbox" name="test" value="1">
第一个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="2">
第二个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="3">
第三个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="4">
第四个
</label>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkboxtest">
第一个
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="radiotest" value="1">
一
</label>
<label>
<input type="radio" name="radiotest" value="2">
二
</label>
<label>
<input type="radio" name="radiotest" value="3">
三
</label>
</div>
<input type="button" value="确定" onclick="setValueTest()" />
</form>
</body>
<script type="text/javascript">
// 扩展自定义方法
;!(function ($)
{
$.fn.setFormValue = function (options)
{
var $this = $(this);
$.each(options, function (key, value)
{
var obj = $this.find("*[name=" + key + "]");
if (obj.attr("type") == "checkbox")
{
if ($.type(value) === "boolean")
{
obj.attr("checked", value);
}
if ($.type(value) === "object")
{
$.each(value, function (i, item)
{
$this.find("*[name=" + key + "][value=" + i + "]").attr("checked", item);
})
}
}
else if (obj.attr("type") == "radio")
{
$this.find("*[name=" + key + "][value=" + value + "]").attr("checked", true);
}
else
{
obj.val(value);
}
})
}
})(jQuery)
// 调用方法为 form 赋值
function setFormData(){
$("#form").setFormValue({
"input": "zsw",//input标签
"textarea": "多行文本",//多行文本
"select":"2",//选择标签
"test": {
1: true,
2: false,
3: true
},//多选框
"checkboxtest": true,//多选框2
"radiotest":"2"
})
}
</script>
</html>
form.load
$("#表单ID").form('load', {
bEdp: '001'
});
提交按钮的禁用
<form id="form_dlg_upload" name="form_dlg_upload" action="drawingLog/upload" method="post" enctype="multipart/form-data" target="targetIfr" onSubmit=" return submitUpload()">
function submitUpload(){
document.form_dlg_upload.submitbtn.disabled = true;
}
document.form_dlg_upload.submitbtn.disabled = false;
手动创建form数据
var formData = new FormData();
formData.append("imgFront",$('#hidupload')[0].files[0]);
formData.append("sampleCode","noFormUploadTest");
formData.append("img","true");
$.ajax({
headers: {
"tradeuser":"o-huL5u73__97ihViycOniCmV_eI"
},
type: "POST",
url: "../../tradebe/sampleMain/save",
contentType: "application/json",
data: formData,
processData: false,
contentType: false,
async:false,
success: function (r) {
console.log('上传图片的响应结果：', r)
}
});
表单数据数组属性
通过 new FormData() 创建的表单数据不可直接赋值数组类型的属性，例如 formData.append("sampleFilesList", [{...},{...},{...}]) 要通过循环遍历数组将对象数组的每个对象的每个属性逐个赋值，注意下面代码中通过 ${index} 表示数组元素下标。
imgFiles.forEach((value, index) => {
// 有4个属性的对象构成的对象数组，一次循环中赋值一个对象的4个属性
formData.append(`sampleFilesList[${index}].category`, value.category)
formData.append(`sampleFilesList[${index}].isUpload`, value.isUpload)
formData.append(`sampleFilesList[${index}].filenameRename`, value.filenameRename)
formData.append(`sampleFilesList[${index}].imgFile`, value.imgFile)
})
类似的，如果 formData 的某个属性是对象，通过下面的方式赋值
let formData = new FormData();
formData.append('main.goodsSid',goodsSid);
formData.append('main.lineIid',lineIid);
这样请求后端 - 后端不可使用 JSON 格式，而要使用模型对象接受
public JsonResult save(SampleWithImg record) throws IOException {
return JsonResult.ok(service.save(record));
}
function save(){
var formData = new FormData();
const imgFiles = [{
iid: 0,
category: '正面',
isUpload: true,
filenameRename: '正面图片的重命名',
imgFile: $('#imgFrontFile')[0].files[0]
},
{
category: '背面',
isUpload: true,
filenameRename: '背面图片的重命名',
imgFile: $('#imgBackFile')[0].files[0]
},
{
category: '细节',
isUpload: true,
filenameRename: '细节图片的重命名',
imgFile: $('#imgDetailFile')[0].files[0]
}]
formData.append("sampleCode","imgFileList");
formData.append("goodsCategory","法兰绒");
imgFiles.forEach((value, index) => {
formData.append(`sampleFilesList[${index}].category`, value.category)
formData.append(`sampleFilesList[${index}].isUpload`, value.isUpload)
formData.append(`sampleFilesList[${index}].filenameRename`, value.filenameRename)
formData.append(`sampleFilesList[${index}].imgFile`, value.imgFile)
})
console.log(formData)
$.ajax({
headers: {
"tradeuser":"o-huL5u73__97ihViycOniCmV_eI"
},
type: "POST",
url: "/tradebe/sampleMain/save",
contentType: "application/json",
data: formData,
processData: false,
contentType: false,
async:false,
success: function (r) {
console.log('上传图片的响应结果：', r)
}
});
}