jQuery 表单验证插件 - 多表单提交_jquery表单提交插件-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147588246

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 表单验证插件 - 多表单提交</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 30px auto;
padding: 25px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
}
.form-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #34495e;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input:focus, select:focus, textarea:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.error {
color: #e74c3c;
font-size: 14px;
margin-top: 5px;
display: none;
}
.error.show {
display: block;
}
.input-error {
border-color: #e74c3c !important;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #2980b9;
}
.btn-submit-all {
background-color: #2ecc71;
margin-top: 20px;
}
.btn-submit-all:hover {
background-color: #27ae60;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 表单验证插件 - 多表单提交</h1>

<form id="form1" class="form-section">
<div class="form-title">个人信息</div>

<div class="form-group">
<label for="name">姓名 *</label>
<input type="text" id="name" name="name" placeholder="请输入您的姓名">
<div class="error" id="name-error">请输入有效的姓名</div>
</div>

<div class="form-group">
<label for="email">电子邮箱 *</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
<div class="error" id="email-error">请输入有效的电子邮箱</div>
</div>

<div class="form-group">
<label for="phone">电话号码</label>
<input type="text" id="phone" name="phone" placeholder="请输入您的电话号码">
<div class="error" id="phone-error">请输入有效的电话号码</div>
</div>
</form>

<form id="form2" class="form-section">
<div class="form-title">账户信息</div>

<div class="form-group">
<label for="username">用户名 *</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<div class="error" id="username-error">用户名必须至少3个字符</div>
</div>

<div class="form-group">
<label for="password">密码 *</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<div class="error" id="password-error">密码必须至少6个字符</div>
</div>

<div class="form-group">
<label for="confirm_password">确认密码 *</label>
<input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入密码">
<div class="error" id="confirm_password-error">两次输入的密码不一致</div>
</div>
</form>

<form id="form3" class="form-section">
<div class="form-title">附加信息</div>

<div class="form-group">
<label for="country">国家</label>
<select id="country" name="country">
<option value="">请选择国家</option>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="japan">日本</option>
</select>
</div>

<div class="form-group">
<label for="bio">个人简介</label>
<textarea id="bio" name="bio" rows="4" placeholder="介绍一下你自己..."></textarea>
</div>

<div class="form-group">
<label>
<input type="checkbox" id="agree" name="agree"> 我同意服务条款和隐私政策 *
</label>
<div class="error" id="agree-error">必须同意服务条款</div>
</div>
</form>

<div class="text-center">
<button type="button" id="submitAll" class="btn btn-submit-all">提交所有表单</button>
</div>

<div class="footer">

</div>
</div>

<script>
// 自定义jQuery表单验证插件
(function($) {
$.fn.formValidate = function(options) {
// 默认设置
const settings = $.extend({
errorClass: 'error',
errorDisplay: 'show',
inputErrorClass: 'input-error',
highlight: function(element) {
$(element).addClass(this.inputErrorClass);
},
unhighlight: function(element) {
$(element).removeClass(this.inputErrorClass);
},
errorPlacement: function(error, element) {
error.insertAfter(element);
}
}, options);

// 验证方法
const methods = {
required: function(value) {
return $.trim(value).length > 0;
},
email: function(value) {
const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return re.test(value);
},
minlength: function(value, length) {
return value.length >= length;
},
equalTo: function(value, target) {
return value === $(target).val();
}
};

// 初始化验证
this.each(function() {
const $form = $(this);

$form.on('submit', function(e) {
e.preventDefault();
return validateForm($form);
});

// 添加实时验证
$form.find('input, select, textarea').on('blur change', function() {
validateField($(this));
});
});

// 验证单个字段
function validateField($field) {
const rules = $field.data('rules');
const value = $field.val();
const $error = $('#' + $field.attr('id') + '-error');

if (!rules) return true;

let isValid = true;
const ruleItems = rules.split(' |');

for (let i = 0; i < ruleItems.length; i++) {
const rule = ruleItems[i].split(':');
const ruleName = rule[0];
const ruleValue = rule[1];

if (!methods[ruleName]) continue;

if (!methods[ruleName](value, ruleValue)) {
isValid = false;
$error.addClass(settings.errorDisplay);
settings.highlight.call(settings, $field);
break;
}
}

if (isValid) {
$error.removeClass(settings.errorDisplay);
settings.unhighlight.call(settings, $field);
}

return isValid;
}

// 验证整个表单
function validateForm($form) {
let isValid = true;

$form.find('[data-rules]').each(function() {
if (!validateField($(this))) {
isValid = false;
}
});

return isValid;
}

return this;
};
})(jQuery);

// 使用插件
$(document).ready(function() {
// 添加验证规则
$('#name').data('rules', 'required');
$('#email').data('rules', 'required|email');
$('#phone').data('rules', 'minlength:11');
$('#username').data('rules', 'required|minlength:3');
$('#password').data('rules', 'required|minlength:6');
$('#confirm_password').data('rules', 'required|equalTo:#password');
$('#agree').data('rules', 'required');

// 初始化表单验证
$('#form1').formValidate();
$('#form2').formValidate();
$('#form3').formValidate();

// 提交所有表单
$('#submitAll').click(function() {
let allValid = true;

// 验证所有表单
$('form').each(function() {
const $form = $(this);
if (!$form.formValidate().validateForm($form)) {
allValid = false;
}
});

if (allValid) {
// 收集所有表单数据
const formData = {};
$('form').each(function() {
$.each($(this).serializeArray(), function(i, field) {
formData[field.name] = field.value;
});
});

// 这里可以发送数据到服务器
console.log(' 所有表单验证通过，准备提交数据:', formData);
alert('所有表单验证通过，数据已准备提交！');
} else {
console.log(' 表单验证未通过');
}
});
});
</script>
</body>
</html>