html/js/css学习之路

来源：互联网发布：小米任我行联通网络编辑：程序博客网时间：2024/06/05 05:33

html文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>form</title>    <script type="text/javascript" src="../js/from_verify.js"></script>    <style>        .loginBtn {            width: 200px;            height:40px;            background-color: #008bea;            color: white;            margin-top: 30px;            font-size: 16px;            border: none;        }        #resultTips {            width: 190px;            height:30px;            line-height: 30px;            background-color: #f9f4cb;            color: red;            font-size: 14px;            padding-left: 10px;            display: none;        }    </style></head><body>    <form action="../index.html" method="post" id="infoForm">        <!--name和id属性内容必须一致-->        账号 ： <input type="text" name="account" id="account"><br>        <button type="submit" id="subButton" class="loginBtn">登录</button>        <div id="resultTips">用户不存在</div>    </form></body></html>

js文件

window.onload = function () {    var tips = document.getElementById("resultTips");    document.getElementById("infoForm").addEventListener("submit",function (event) {        var accountObj = document.getElementById("account");        if (accountObj.value == ""){            tips.style.display = "block";            tips.textContent = "请输入账号";            //拦截请求            if (event && event.preventDefault) {                event.preventDefault();            } else { //针对IE浏览器                window.event.returnValue = false;            }        } else {            //用正则判断账号格式是否正确            if (/^\w+@\w+\.\w+$/.test(accountObj.value)) {                this.submit();            } else {                tips.style.display = "block";                tips.textContent = "账号不正确";                //拦截请求                if (event && event.preventDefault) {                    event.preventDefault();                } else { //针对IE浏览器                    window.event.returnValue = false;                }            }        }    },false);};

0 0