npm i xq-tab-form

在typescript代码或javascript代码中引入后使用

import xqTabForm from 'xq-tab-form';

导入后在相应的表单添加class="xq-tab-form"的属性就可以自动运行

同时在相应的页面得引入bootstrap相关的css和js文件

<form name="tab_form" class="xq-tab-form" method="post">

<ul class="nav nav-tabs" role="tablist" id="tab_form_tab">
    <li class="nav-item" role="presentation">
        <a type="button" class="nav-link active" id="tab_1_list" 
        data-bs-toggle="tab" data-bs-target="#tab_1" role="tab" 
        aria-controls="tab_1" aria-selected="true">网站基本信息</a>
    </li>
    <li class="nav-item" role="presentation">
        <a type="button" class="nav-link" id="tab_2_list" 
        data-bs-toggle="tab" data-bs-target="#tab_2" role="tab" 
        aria-controls="tab_2" aria-selected="false">SEO信息</a>
    </li>
</ul>

<div class="tab-content" id="tab_form_tab_tab_content">

    <div class="tab-pane fade active show" id="tab_1" 
    role="tabpanel" aria-labelledby="tab_1_list">
        <div class="form-group row">
            <label class="col-2 col-form-label text-end">网站名称</label>
            <div class="col-4">
                <input type="text" id="site_name" name="site_name" 
                class="form-control" required="1">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label text-end">网站域名</label>
            <div class="col-4">
                <input type="text" id="site_domain" name="site_domain" 
                class="form-control" required="1">
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="tab_2" role="tabpanel" 
    aria-labelledby="tab_2_list">
        <div class="form-group row">
            <label class="col-2 col-form-label text-end">网站标题</label>
            <div class="col-4">
                <input type="text" id="seo_title" name="seo_title"
                    class="form-control" required="1">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label text-end">网站关键字</label>
            <div class="col-4">
                <input type="text" id="seo_keyword" name="seo_keyword" 
                class="form-control" required="1">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label text-end">网站描述</label>
            <div class="col-4">
                <textarea id="seo_desc" name="seo_desc" class="form-control"
                    required="1" rows="8" cols="30"></textarea>
            </div>
        </div>
    </div>

</div>

<div class="form-group row">
    <div class="col-4 text-end">
        <input type="submit" id="submit" value="确定" class="btn btn-primary" 
        style="width:100px;margin-bottom:1rem;"/>
    </div>
    <div class="col-4 text-start">
        <input type="reset" id="reset" name="reset" value="重置" 
        class="btn btn-secondary" style="width:100px;margin-bottom:1rem;"/>
    </div>
</div>
    
</form>

未启用xq-tab-form，填写“网站名称”和“网站域名”后提交，没有任何提示！

在相应的表单标签添加class="xq-tab-form"可以自动启用xq-tab-form

启用xq-tab-form，填写“网站名称”和“网站域名”后提交，会自动切换Tab标签，并显示表单验证提示信息！