（一）jquery做ajax表单提交以及字段验证

最新推荐文章于 2021-08-06 11:48:07 发布

原创最新推荐文章于 2021-08-06 11:48:07 发布 · 947 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #jquery #ajax #json #php

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用jQuery库简化HTML表单处理过程，包括表单输入验证及通过Ajax进行后台数据提交的方法。文章详细展示了如何设置表单元素、绑定点击事件处理程序以及编写验证逻辑，并使用Ajax发送POST请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在你的html页面中引入jquery文件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

创建表单

<form>
<div class="active-form">
<div class="name-container"><span>姓名：</span><input type="text" id="s-name"  maxlength="6"></div>
<div class="phone-container"><span>电话：</span><input type="text" id="s-phone"  maxlength="11"></div>
<div class="weibo-container">新浪微博名：<input type="text" id="s-weibo"   maxlength="15"></div>
<div class="btn" id="btn">提交</div>
</div>
</form>

</pre><p></p><pre>

jquery部分

$("#btn").click(function(){

	var username = $("#s-name").val();
	var phone = $("#s-phone").val();
	var microblog = $("#s-weibo").val();

	if(username=='') {
		alert('姓名不能为空');
		$(":text[id=s-name]").focus();  
		return;
	}

	if(phone=='') {
		alert('手机号不能为空');
		$(":text[id=s-phone]").focus();  //当有错误就自动指定input输入框
		return;//阻止表单提交
	}
	if(!phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)) {
		alert('手机号码格式不正确');
		$(":text[id=s-phone]").focus();  
		return;
	}
	if(microblog=='') {
		alert('微博号不能为空');
		$(":text[id=s-weibo]").focus();  
		return;
	}
	$.ajax({
		type:'post',//提交方式
		url: '你要处理数据的url',
		dataType:'json',//数据类型
		data: {
			'username' : username ,//对应input内容
			'phone' : phone ,
			'microblog' : microblog ,
			},
			success: function(data){//执行成功后操作
			<span style="white-space:pre">	</span>console.log(data);//看下返回的数据
		<span style="white-space:pre">	</span>}
		});
});

表单创建完毕后就开始我们的ajax了