Javascript 如何使用多个选项卡验证表单？

我有一张有三个标签的登记表。第一个选项卡是用户可以输入

电子邮件

、

密码

和

确认密码

的地方，第二个选项卡是他们的详细信息，如地址、手机号码、状态等，第三个选项卡是用户必须同意T&C并提供数字签名的地方

我可以随意打开任一选项卡，而不必填写某些字段，但当我单击“注册”按钮（在第三个选项卡中）时，它应执行客户端验证，以确保键入所有字段并匹配密码/确认密码。例如，任何未显示的字段都应通知用户

代码：

登记处








@csrf
账户详情
电子邮件
密码
确认密码
-->
下一个

---

我尝试在输入上使用

required

，但似乎没有任何效果。在我看来，jQuery似乎是唯一剩下的选项，但我想知道有没有更简单的方法来实现这一点？

我在手机上，所以您的代码基本上无法读取，因为手机格式很奇怪。你可以做的是，当你切换标签时，你实际上只是让一些隐藏的元素在同一个表单中显示和隐藏。这在JavaScript中很容易做到。然后您可以将它们全部设置为required和tada。不是100%确定这是否有效，但我认为会。确保使用html隐藏属性，而不是css显示无。

我在手机上，因此您的代码基本上无法读取，这是导致手机格式怪异的原因。你可以做的是，当你切换标签时，你实际上只是让一些隐藏的元素在同一个表单中显示和隐藏。这在JavaScript中很容易做到。然后您可以将它们全部设置为required和tada。不是100%确定这是否有效，但我认为会。确保使用html隐藏属性，而不是css显示无。

以下是使用JQuery验证匹配密码的示例。
我正在使用

.keyup（function（）{}）

设置一个函数，然后我正在设置一个条件，检查每个id标记的值，如果它们不匹配，我将返回一条红色和bg的错误消息，警告用户不匹配，我还将禁用提交按钮，以便他们在解决问题之前无法提交表单。然后，如果存在匹配项，我将返回一条绿色和bg的成功消息，并删除禁用属性，以便提交表单

重要注意事项：数据库或登录的验证表单应在后端完成，而不是前端。前端应仅用作验证的第一步。请记住，JS可能会被禁用，从而使您的验证变得毫无价值。使用PHP或ASP进行最终验证

$（“#password”）.keyup（function（）{//我们在keyup事件中激发
//使用.val（）及其ID比较两个密码的值
如果（$（“#密码”）.val（）！=$（“#确认#密码”）.val（）{
//如果它们不匹配，我们将向div#msg添加一条错误消息
//我们还删除了潜在的类，并添加了新的类，以获得警告字体颜色和背景颜色
$（“#msg”）.html（“密码不匹配”）.removeClass（“警报成功”）.addClass（“警报危险”）；
//使用.prop（）和remove/addClass（）禁用提交按钮并设置其样式
$（“#输入”）.prop（'disabled'，true）；
$（“#输入”）.removeClass（“警报成功”）.addClass（“警报危险”）；
}否则{
//成功时，我们添加成功消息并切换样式，以绿色显示成功
$（“#msg”）.html（“密码匹配”）.removeClass（“警报危险”）.addClass（“警报成功”）；
//通过删除已禁用的属性，重新打开提交
$（“#输入”）.prop（'disabled'，false）；
$（“#输入”）.removeClass（“警报危险”）.addClass（“警报成功”）；
}
});
//冲洗并重复#确认密码标签
$（“#确认密码”）.keyup（函数（）{
if（$（“#密码”）.val（）！=$（“#确认#密码”）.val（））{
$（“#msg”）.html（“密码不匹配”）.removeClass（“警报成功”）.addClass（“警报危险”）；
$（“#输入”）.prop（'disabled'，true）；
$（“#输入”）.removeClass（“警报成功”）.addClass（“警报危险”）；
}否则{
$（“#msg”）.html（“密码匹配”）.removeClass（“警报危险”）.addClass（“警报成功”）；
$（“#输入”）.prop（'disabled'，false）；
$（“#输入”）.removeClass（“警报危险”）.addClass（“警报成功”）；
}
});

密码
确认密码
下面是一个使用JQuery验证匹配密码的示例。

我正在用
.keyup（function（）{}）
设置一个函数，然后我正在设置一个条件
 <div>
        <div class="card border-rounded-0 bg-bujishu-gold guests-card">
            <h5 class="text-center bujishu-gold form-card-title">Registration</h5>
            <ul class="nav nav-tabs nav-fill" role="tablist">
                <li class="nav-item active">
                    <a class="nav-link register-tab-active active" id="home-tab" data-toggle="tab" href="#registration" role="tab" aria-controls="registration" aria-selected="true">Registration</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link register-tab-active" id="profile-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Information</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link register-tab-active" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="agreement" aria-selected="false">Agreement</a>
                </li>
            </ul>
            <div class="card-body">

                <!-- Dealer Registration Form -->
                <form method="POST" action="{{ route('register') }}">
                    @csrf
                    <div class="tab-content" id="myTabContent">
                        <!-- Registration  Tab-->
                        <div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" class="form-control" required id="email" placeholder="Email">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="password">Password</label>
                                    <input type="password" name="password" class="form-control" required id="password">
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="password-confirm">Confirm Password</label>
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>

                            <!-- Next Button -->
                            <div class="text-right">
                                <!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
                                <a class="btn btn-secondary next-button">Next</a>
                            </div>
                        </div>

                        <!-- Information Tab -->
                        <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                            <!-- Personal Particulars -->
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="full_name">Full Name (as per NRIC)</label>
                                    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="nric">NRIC Number</label>
                                    <input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 1</label>
                                    <input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 2</label>
                                    <input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 3</label>
                                    <input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="postcode">Postcode</label>
                                    <input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="city">City</label>
                                    <input type="text" name="city" id="city" class="form-control" placeholder="City">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="state">State</label>
                                    <select name="state" id="state" class="form-control">
                                        <option disabled selected>Choose your state..</option>
                                        @foreach($states as $state)
                                        <option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="contact_number_home">Contact Number (Home)</label>
                                    <input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="contact_number_mobile">Contact Number (Mobile)</label>
                                    <input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-12">
                                    <label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
                                        <label class="form-check-label" for="existing_customer">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="1">
                                        <label class="form-check-label" for="existing_customer">Yes</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Next Button -->
                            <div class="text-right">
                                <!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
                                <a class="btn btn-secondary next-button">Next</a>
                            </div>
                        </div>