Jq form表单提交验证与响应简单示例

最新推荐文章于 2023-10-17 17:27:57 发布

粤小七

最新推荐文章于 2023-10-17 17:27:57 发布

阅读量4.8k

点赞数 3

分类专栏： Web前端文章标签： web前端表单

本文链接：https://blog.csdn.net/qq1014156094/article/details/70570124

版权

Web前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<title>表单提交验证与响应</title>
	</head>

	<body>
		<form method="post" οnsubmit="return verification()">
			<input name="name" id='name' type='text' placeholder='姓名(必填)' />
			<input name="content" id='content' type='text' placeholder='内容(必填)' />
			<input type='submit' value='提交' />
		</form>

		<script>
			function verification() {
				if($('#reqName').val() == '') {
					alert('姓名不能为空!');
					return false;
				}
				if($('#reqContent').val() == '') {
					alert('内容不能为空!');
					return false;
				}
				$.ajax({
					url: "{:create_addon_url('deal')}",
					type: 'post',
					dataType: 'json',
					data: {
						'name': $('#reqName').val(),
						'email': $('#reqEmail').val(),
						'contact': $('#reqPhone').val(),
						'content': $('#reqContent').val()
					},
					success: function(data) {
						alert("提交成功，" + data.info);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert("发生错误，" + textStatus);
					}
				});
				return true;
			}
		</script>
	</body>

</html>