本文个人博客地址:https://www.leafage.top/posts/detail/20C23LIR2
对于 Form 表单提交数据,有时候页面没有任何字段需要进行校验,但这样就会导致不填写任何数据,都可以直接保存、编辑,产生很多无用的记录,这样的体验很不好,我们需要能进行判断是否表单全局为空,如何解决这种问题 ?
实现思路:
首先拿到 Form 表单中的所有 input、textarea、select 的数据(一般使用:$("#xxxForm").serialize() 方式),然后因为经常载表单中放一些ID,来做判断是否编辑,这样会有一下隐藏域(即<input type='hidden' >),所以要去掉隐藏域的数据,再进行表单数据是否为空的判断。
如何判断?
定义一个参数 result = '',然后将序列化得到的表单对象(fmData)在循环中和隐藏域的属性进行比较(实际比较的是参数名是否一致),如果当前属性在隐藏域的属性中不存在(不一致),就把当前属性的值(value)拼接传递给 result,最后判断 result 是否为 ' ' 且 长度是否大于0,如果为 ' ' 或 长度不大于 0 ,则表单全局为空。
那要对表单数据进行操作,要怎么进行呢,首先得序列化表单,获取页面所有参数,将隐藏域数据排除掉,但是 serialize() 方法获得的结果是 " FirstName=xxx&LastName=xxx " 这种一个字符串的类型,而不是 Json 类型,所以需要将表单数据序列化为Json 之后进行操作,字符串的类型要进行操作会很麻烦,所以需要序列化为Json进行操作,使用 serializeObject() 方法,就可以转换成 Json 类型数据;
实现方法:
情况一、隐藏的(type="hidden")参数少:
直接再循环中排除隐藏域的不需要进行判断的参数;
/**
* 检验表单是否为空
*/
function checkForm() {
//首先序列化表单数据为Json类型
var fmData = $("#myForm").serializeObject();
//定义结果表示是否表单为空
var result = "";
for (var item in fmData) {
if (item != "param1" && item != "param2") {
result += fmData[item].trim();
}
}
if (result != "" && result.length > 0) {
//xxx...
}else{
//xxx...
}
}
情况二、隐藏的(type="hidden")参数多:
首先定义一个 Json 类型的对象 ignoreData,用于存放需要排除掉的参数,然后再将这些参数(ignoreData)从序列化之后的对象(fmData)中删除在进行判断;
/**
* 检验表单是否为空
*/
function checkForm() {
var fmData = $("#myForm").serializeObject();
//隐藏域属性
var ignoreData = {
param1: '',
param2: '',
param3: '',
param4: '',
param5: '',
param6: '',
...
};
//去掉隐藏域的属性
for (var i in ignoreData) {
delete fmData[i];
}
var result = "";
for (var item in fmData) {
result += $.trim(fmData[item]);
}
if (result != "" && result.length > 0) {
//xxx...
} else {
//xxx...
}
}
注:关于serializeObject()方法的具体实现:
$.fn.serializeObject = function () {
var result = {};
var array = this.serializeArray();
$.each(array, function () {
if (result[this.name]) {
if (!result[this.name].push) {
result[this.name] = [result[this.name]];
}
result[this.name].push(this.value || '');
} else {
result[this.name] = this.value || '';
}
});
return result;
}