在提交表单数据前对数据进行验证,例如某些字段是必填字段,不能为空,有如下三种方法:
在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(){
let username= $.trim($("#username").attr("value"));
if(isEmpty(username)){
alert("username不能为空。");
return false;
}else {
return true;
}
});
去掉submit类型button,直接用普通button
<button type="button" onclick="check()">提交</button>
function isEmpty(obj){
if(typeof obj == "undefined" || obj == null || obj == ""){
return true;
}else{
return false;
}
}
function check(){
let username= $.trim($("#username").attr("value"));
if(isEmpty(username)){
alert("username不能为空。");
}else {
document.getElementById("form").submit();
}
}
在form的onsubmit事件判断
<form id="form" method="post" action="" onsubmit="return check()">
function isEmpty(obj){
if(typeof obj == "undefined" || obj == null || obj == ""){
return true;
}else{
return false;
}
}
function check(){
let username= $.trim($("#username").attr("value"));
if(isEmpty(username)){
alert("username不能为空。");
return false;
}else {
return true;
}
}
注意:
- onsubmit=“return false”为不执行提交;
- onsubmit=“return true”或 onsubmit=“return ”都执行提交。
使用用jQuery的submit方法
点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法。也就是jQuery的submit的方法执行顺序,在表单的提交之前。
$("#addUpdateForm").submit(function (e){
//获取用户选择的单选按钮的数量
let stateSize = $("input[name='state']:checked").size();
//获取下拉列表选中的值
if($("#area").val()==1 || stateSize==0){
alert("必须选择状态");
return false;
}
return false;
})
说明:return false不往下执行请求form的action,return true继续往下执行请求form的action。