master

分支 (1)

管理

管理

master

web
/
11.html

<!DOCTYPE html>
<html>
<head>
	<title>表单注册验证</title>
	<script src="jQuery.js"></script>
	<script>
	$(document).ready(function() {
		// 定义验证函数
		function validateForm() {
			// 获取表单数据
			var username = $('#username').val();
			var password = $('#password').val();
			var confirmPassword = $('#confirm-password').val();
			var email = $('#email').val();

			// 前端表单数据验证
			if (username.length < 4) {
				$('#username-error').html('用户名长度不能少于4个字符！');
				return false;
			} else {
				$('#username-error').empty();
			}
			if (password.length < 6) {
				$('#password-error').html('密码长度不能少于6个字符！');
				return false;
			} else {
				$('#password-error').empty();
			}
			if (password !== confirmPassword) {
				$('#confirm-password-error').html('两次输入的密码不一致！');
				return false;
			} else {
				$('#confirm-password-error').empty();
			}

			// 验证通过
			return true;
		}

		// 绑定事件监听器
		$('#username').on('input', validateForm);
		$('#password').on('input', validateForm);
		$('#confirm-password').on('input', validateForm);
		$('#email').on('input', validateForm);

		// 绑定提交表单事件
		$('form').submit(function() {
			// 防止重复提交
			if ($(this).data('submitted') === true) {
				return false;
			} else {
				$(this).data('submitted', true);
			}

			// 前端表单数据验证
			if (!validateForm()) {
				return false;
			}

			// 显示 loading 效果
			$("#loading").show();

			// 发送 Ajax 请求进行表单验证
			$.ajax({
				url: 'https://api.vvhan.com/api/dm',
				method: 'POST',
				data: {
					username: $('#username').val(),
					password: $('#password').val(),
					confirmPassword: $('#confirm-password').val(),
					email: $('#email').val()
				},
				success: function(data) {
					$('#message').html(data); // 显示验证信息
				},
				complete: function() {
					// 隐藏 loading 效果
					$("#loading").hide();
					$('form').data('submitted', false);
				}
			});

			// 阻止表单默认提交行为
			return false;
		});
	});
	</script>
</head>
<body>
	<form id="register-form" method="post">
		<label for="username">用户名：</label>
		<input type="text" id="username" name="username" required>
		<span id="username-error" style="color: red;"></span><br><br>

		<label for="password">密码：</label>
		<input type="password" id="password" name="password" required>
		<span id="password-error" style="color: red;"></span><br><br>

		<label for="confirm-password">确认密码：</label>
		<input type="password" id="confirm-password" name="confirm-password" required>
		<span id="confirm-password-error" style="color: red;"></span><br><br>

		<label for="email">邮箱：</label>
		<input type="email" id="email" name="email" required>
		<span id="email-error" style="color: red;"></span><br><br>

		<input type="submit" value="注册">
	</form>

	<div id="message"></div>
	<div id="loading" style="display: none;">加载中...</div>
</body>
</html>