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

最新推荐文章于 2021-10-18 22:32:43 发布

前端蜗牛君

最新推荐文章于 2021-10-18 22:32:43 发布

阅读量6.2k

点赞数 1

分类专栏：笔记文章标签： ajax 框架 url 表单

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.csdn.net/zqd_java/article/details/53543391

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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" οnsubmit="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改标签里的内容