表單驗證的沒有涉及後臺交互

時間  2019-11-17
標籤 表單 驗證 沒有 涉及 後臺 交互 欄目 HTML 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!--次驗證利用了layer插件使用時須要把layer導入。樣式本身調主要是js的邏輯判斷-->
    <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="layer-v3.1.1/layer/layer.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="box" style="width: 600px; height: 500px; border: 1px solid red; margin: 0 auto;">
    <form action="" method="post" id="user_form" style="text-align: center;">
                    <div class="email_box" style=" margin-top: 50px;">
                        <label>公司郵箱：</label>
                        <input type="email" name="" id="eal" value=""/>
                    </div>
                    <div class="card" style="margin-top: 50px; padding-right:30px ;">
                        <label>身份證後六位：</label>
                        <input type="text" maxlength="6" name="" id="card" value="" />
                    </div>
                    <div class="sub" style="margin-top: 50px; padding-left: 100px;">
                        <input type="submit" value="提 交" style="color: #1b645a; width: 200px; "  />
                    </div>
    </form>
    </div>
    <script type="text/javascript">
        var user_form = document.getElementById('user_form');
            user_form.onsubmit=function(){
                var eal = document.getElementById('eal').value;
                var card = document.getElementById('card').value;
                if(eal != ''){
                    if(card !=''){
                        return true;
                    }else{
                        layer.tips('請填寫身份證', '#card');
                        return false;
                    }
                }else{
                    if(card !=''){
                        layer.tips('請填寫郵箱', '#eal');
                        return false;
                    }else{
                        alert('請填寫信息');
                        return false;
                    }
                }
            }
    </script>
</body>
</html>javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程