layui 폼 검증 사례

HTML 코드:

                          

                            反馈主题
                            

                              
                            
                          
                          

                            姓名
                            

                              
                            
                          
                          

                            手机
                            

                              
                            
                          
                          

                            邮箱
                            

                              
                            
                          
                          

                            单选框
                            

                              
                              
                              
                            
                          
                          
                          

                            内容
                            

                                                          </div>
                          </div>
                          <div class="layui-form-item">
                            <div class="layui-input-block">
                              <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
                              <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
                              <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                            </div>
                          </div>
                        </form></code></pre>  <br><br/> <br><br/> <br><p>js 검증 코드</p><br><p><br/></p> <pre><code><disable_script><br>layui.use(['form', 'layedit', 'laydate'], function(){<br>var form = layui.form()<br>,layer = layui.layer<br>,layedit = layui.layedit<br>,laydate = layui.laydate;<br>//인증 규칙 사용자 정의<br>form.verify({<br>title: function(value){<br>if(value.length < 5){<br>return '제목은 최소 5글자가 되어야 합니다';<br>}<br>}, fname: function(value){<br>if(value.length < 4){<br>return '최소 4자리의 사용자 이름을 입력하십시오';<br>}<br>}, contact: function(value){<br>if(value.length < 4){<br>return '내용은 최소 4글자를 입력하십시오';<br>}<br>}<br>, 아이폰: [/^1[3|4|5|7|8]\d{9}$/,'핸드폰은 11자리, 숫자만 가능!'<br>,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z] {2,4}$|^1[3|4|5|7|8]\d{9}$/,'메일박스 형식이 틀렸습니다']<br>});<br>//편집기 만들기<br>layedit.build('LAY_demo_editor');<br>//수신 커밋<br>form.on('submit(demo1)', function(data){<br>layer.alert(JSON.stringify(data.field), {<br>title:'최종 제출 정보'<br>})<br>return false;<br>});<br>});<br>다른 검증은 여기 보세요.<br>http://www.51xuediannao.com/js/jquery/jquery_validate/</disable_script>
                <div class="">
                    
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923"
         crossorigin="anonymous"></script>
    <!-- geeks-中间底部-01 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-1344493394064923"
         data-ad-slot="9316917350"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    
    
                </div>
                

                

                
                
                


            </div>


            <div class="row mb-4">
                <div class="col-6 text-primary text-capitalize ">
                    <a class=" btn bg-primary-soft  small  float-left  text-capitalize "
                       href="/tutorial/javascript-closeup-example-description">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-arrow-left">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>

                        JavaScript 클로즈업 인스턴스 설명</a>
                </div>
                <div class="col-6  text-primary text-capitalize ">
                    <a class=" btn bg-primary-soft small float-right text-capitalize "
                       href="/tutorial/html-filter-in-actionfilterattribute-to-compress-html-code">ActionFilterAttribute의 HtmlFilter, HTML 코드 압축
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-arrow-right">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>


                    </a>
                </div></div>
            
            <div class="row mb-4">
                <div class="col-xl-12 col-12">

                    <div class="container-fluid">
                        <h4 class="card-title ">좋은 웹페이지 즐겨찾기</h4>

                        <!--begin::Stats Widget 4-->
                        <div class="card card-custom card-stretch gutter-b ai-recommended-bg-03 shadow-sm">
                            <!--begin::Body-->
                            <div class="card-body d-flex align-items-center py-0 mt-2 ">
                                <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5">
                                    <p class="mb-2 text-muted">개발자 우수 사이트 수집</p>
                                    <a href="/" target="_blank"
                                       class="card-title font-weight-bolder text-primary font-size-h3 mb-2 text-hover-primary ">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                             fill="currentColor"
                                             class="bi bi-link-45deg" viewBox="0 0 16 16">
                                            <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path>
                                            <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path>
                                        </svg>
                                        개발자가 알아야 할 필수 사이트 100선 추천</a>
                                    <span class="font-weight-bold text-muted font-size-lg">우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다</span>
                                </div>
                                <img src="/static/v3_theme_01_asset/img/website-nav-pages-img3.svg"
                                     alt="best100-homepage"
                                     class="align-self-end h-20px img-responsive border-small " style="width:36%;">
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Stats Widget 4-->


                    </div>


                </div>
            </div>
            

            <div class="row mb-4">
                <aside class="col-md-12 col-xxl-12 d-none d-md-block float-right pt-3 m-2 ">
                    <div class="row"></aside>
            </div>


        </article>

        <div class="col-0  col-xs-0  col-sm-0  col-md-3 col-lg-3 col-xl-3 col-xxl-3    m-0 p-0 ">

            <div class="navbar-expand-lg navbar-expand-lg sidebar sidebar-sticky "
                 style="border-right: 1px solid rgba(0, 0, 0, .05);">


                <!-- Navbar Collapse -->

                <div id="navbarVerticalNavMenu2 " class="  collapse navbar-collapse pt-3   card  m-0 p-0 d-flex flex-row"
                     style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%;">


                    <div class=" h-100 pt-0  "
                         style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%; max-width: 260px;">

                        
                        <div class="row bg-light-off  mb-2  ai-recommended-bg-02-off  " style="border-radius: 2px;">
                            
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923"
         crossorigin="anonymous"></script>
    <!-- geeks-右侧广告01-大横幅 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:300px;height:600px"
         data-ad-client="ca-pub-1344493394064923"
         data-ad-slot="7275371082"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    
                        </div>
                        


                        
                        <div class="row bg-light-off mb-2  ai-recommended-bg-02-off " style="border-radius: 2px;">
                            
    
                        </div>
                        

                    </div>


                </div>
                <!-- End Navbar Collapse -->
            </div>


        </div>


    </div>

</div><!-- footer -->
<footer class="bg-primary-soft p-3 mt-5">
    <div class="container">
        <div class="row gutter-3">

            <div class="col-12 col-md-12 text-white text-center text-lowercase">

                <p class="mb-0 text-muted small text-uppercase">©
                    2022 intrepidgeeks.com  </p>
                <a href="/privacy" target="_blank" class="text-muted" rel="nofollow">Privacy Policy</a> <a
                    href="/contact_us"
                    target="_blank"
                    class="text-muted" rel="nofollow">Contact
                US</a> <a href="/sitemap.xml" class="text-muted" target="_blank" rel="nofollow">Sitemap</a>

            </div>

        </div>
    </div>
</footer>
<!-- / footer -->

<!-- Bootstrap 4 Version -->
<div class="nk-cookie-banner alert alert-secondary text-center mb-0 small" role="alert"
     style="background: rgba(255, 255, 255, .6);border-color:#f2f2f2;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(20px);">
    🍪 This website uses cookies to ensure you get the best experience on our website.
    <a href="/privacy" target="blank" rel="nofollow">Learn more</a>
    <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
        I Got It
    </button>
</div><!-- JS Global Compulsory hs-builder:build-delete -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/static/v3_theme_01_asset/js/quick-website.min.js"></script>
<script src="/static/all_theme_package/cookie-banner.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
    function addDarkmodeWidget() {
        const options = {
            bottom: '64px', // default: '32px'
            right: '36px', // default: '32px'
            left: 'unset', // default: 'unset'
            time: '0.4s', // default: '0.3s'
            mixColor: '#fff', // default: '#fff'
            backgroundColor: '#fff',  // default: '#fff'
            buttonColorDark: '#666666',  // default: '#100f2c'
            buttonColorLight: '#fff', // default: '#fff'
            saveInCookies: true, // default: true,
            label: '🌙', // default: ''
            autoMatchOsTheme: false // default: true
        }

        new Darkmode(options).showWidget();
    }

    window.addEventListener('load', addDarkmodeWidget);
</script>
    <script async >
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?62e51dcb98a631eb7af0fd338250ca43";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    
<script src="/static/all_theme_package/auto-enable-prism.js"></script>

<script src="/static/all_theme_package/prism.min.js"></script>


<script>
    $(document).ready(function () {
        $('#post-content h1').each(function (i, el) {
            var c = $(el).attr("class");
            $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>')
        });
    });

    h2_length = $("#post-content h2").length
    // console.log(h2_length);

    h3_length = $("#post-content h3").length
    // console.log(h3_length);

    $(document).ready(function () {

        if (h2_length < 1 && h3_length > 0) {
            $('#post-content h3').each(function (i, el) {
                var c = $(el).attr("class");
                $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>')
            });


        }
        ;

    });
</script>

<script src="/static/all_theme_package/thirdparty/blogmenu/jquery.autoMenu.js"></script>

<script>

    $(document).ready(function () {
        $("#blog-autoMenu").autoMenu({
            levelOne: 'h2', //一级标题
            levelTwo: 'h3',  //二级标题（暂不支持更多级）
            width: 160, //容器宽度
            height: '100%', //容器高度
            padding: 10, //内部间距
            offTop: 130, //滚动切换导航时离顶部的距离
        });

        h1_length = $("#post-content h1").length
        // console.log(h1_length);
        h2_length = $("#post-content h2").length
        // console.log(h2_length);
        h3_length = $("#post-content h3").length
        // console.log(h3_length);


        if (h2_length < 1) {

            $(".blog-auto-menu-div").remove();
        } else {
            $(".blog-auto-menu-div-title").show();
        }


    });


</script>

<script src="/static/v3_theme_01_asset/js/headBand.min.js"></script>
<script>
    $('#geek-nav').headBand({
        'background': '#222222',//设置背景色
        'height': "2" //设置进度条高度
    });
</script></body>

</html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="578085ba19b10e7d10289e2f-|49" defer></script>