(一)jquery做ajax表单提交以及字段验证

本文介绍如何利用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了


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值