ajax提交，form表单提交，onsubmit="return checksubmit()"提交验证

关注

原创最新推荐文章于 2026-09-06 14:47:07 发布 6.3k 阅读 AI 写同款· GEO 优化 ›

如何解决表单提交的onsubmit失效问题有时候我们提交表单需要进行数据验证，这时候会有很多小伙伴百度找代码然后复制，最后发现失效，有如下几个原因第一：百度很多所谓教程有坑，其中onsubmit中的o是希腊字母o并不是英文字母o导致失效，把这段删掉手动输入，并且return check()后面不要加分号也不需要在里面加this或者this.form 这些都是错误的教程，都是不懂技术的搬运来的错误教程。check()里使用document.getElementById获取数据，不要使用name啥的容易出问题第二：通过第一步基本都能正常，如果还不能阅读详情

Ajax提交的两种方式：

一是url参数提交数据，

二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素很多的话建议用第二种方式进行提交

一.Url参数提交数据

<script type="text/javascript"> 
function checkCorpID()//检测客户编号是否可用 
{ 
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框 
{ 
alert("请输入客户编号!"); 
} 
else 
{ 
$("#checkFlag").html("正在检测");//显示提示信息 
$.ajax({ 
type: "POST",    		//提交方式（一般选择post提交，安全）
url: "CheckCorpID.ashx", 
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单，相当于CheckCorpID.ashx?ID=XXX 
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后台传过来的值 
}); 
} 
} 
</script>

二.form表单提交

<script type ="text/javascript" src ="../js/jquery.js"></script> //必须要引用 
<script type ="text/javascript" src ="../js/jquery.form.js"></script> //必须要引用 
<script type="text/javascript"> 
// wait for the DOM to be loaded 
$(document).ready(function() 			//ready在文档加载后激活函数
{ 
$('#Tip').hide();//显示操作提示的元素不可见 
$('#form1').submit(function()//提交表单 
{ 
//alert("ddd"); 
var options = { 
target:'#Tip', //后台将把传递过来的值赋给该元素 
url:'ReturnVisit.aspx?flag=do', //提交给哪个执行 
type:'POST', 
success: function(){ alert($('#Tip').text());} //显示操作提示 
}; 
$('#form1').ajaxSubmit(options); 
return false; //为了不刷新页面,返回false，反正都已经在后台执行完了，没事！ 
}); 
} 
); 
</script> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="2" class="tableCategory">客户回访</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">客户名称：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回访主题：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">联系人：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">联系人职务：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">联系电话：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回访时间：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回访内容：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1">回访相关文档：</td> 
<td class="tableBg2"> 
<asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td width="30%" class="tableBg1"> </td> 
<td class="tableBg2"> 
<asp:Button ID="Submit_BT" runat="server" Text="确定" CssClass="button" /> 
<input type="reset" class="button" value="还原" /> 
</td> 
</tr> 
</table> 
<span id="Tip"></span> 
</div> 
</form> 
</body>

 <button type="submit">保存</button>
    </div>
	</form>

三.提交验证

HTML表单代码段：

<span id="ss" style="color: red;font-size: 12px;"></span>

<form action="dw/addDw" method="post" onsubmit="return submitCheck()">

<table class="rttable">
		<tr>
			<td class="tdbg">单位名称</td>
			<td class="tdinput"><input type="text" name="dwmc" id="dwmc" required="required" value="${tbDw.dwmc }" class="form-control" /></td>
			 <button type="submit">保存</button>
    </div>
	</form>

javascript验证代码：

function submitCheck(){

var s1 = $("#ss").html();
if(s1.length > 0 ){
	    if(s1.length > 0){
	       alert(s1);
	    }	    
	    return false;
	} else {
	    return true;
	}
}

$("#dwmc").blur(function() {
		  var cyxmpzmc = $("#dwmc").val();
		  var cyxmpzmcStr = encodeURI(encodeURI(cyxmpzmc));
		  $.post("dw/dwmccfyz?cyxmpzmc="+cyxmpzmcStr, function(data){
			  if("1"==data) {
			     alert("单位名称已存在，请重新录入！");	
			     $("#ss").text("单位名称已存在");
			  } else{
			   $("#ss").text("");
			  }
		  });
	  });

效果展示：

javascript：知识点：
$("#dwmc").blur(function() { //blur焦点
var cyxmpzmc = $("#dwmc").val(); //val取值
<span id="ss" style="color: red;font-size: 12px;"></span>
$("#ss").text("单位名称已存在"); //html改标签里的内容

收录于