前端:简述表单提交前如何进行数据验证

前端:简述表单提交前如何进行数据验证


通常在提交表单数据时,我们会对数据进行验证,例如某些字段是必填字段,不能为空,这时应该如何做呢?有如下三种方法:

一、在button的submit事件进行判断

<button type="submit">提交</button>
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}

("#form").bind("submit",function(){
    var username= $.trim($("#username").attr("value"));

    if(isEmpty(username)){  
        alert("username不能为空。");
        
        return false;
   }else {
		return true;
	}  
});

二、在form的onsubmit事件判断

注意: o nsubmit=“return false”为不执行提交;o nsubmit=“return true”或o nsubmit=“return ”都执行提交。

<form id="form" method="post" action="......"  o nsubmit="return check()">
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}

function check(){  
    var username= $.trim($("#username").attr("value"));

    if(isEmpty(username)){  
        alert("username不能为空。");
        
        return false;
   }else {
		return true;
	}  
}

三、去掉submit类型button,直接用普通button

<button type="button"  o nclick="check()">提交</button>  
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}

function check(){  
    var username= $.trim($("#username").attr("value"));

    if(isEmpty(username)){  
        alert("username不能为空。");
   }else {
		document.getElementById("form").submit();
	}  
}
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页