原生Js表單驗證，Js驗證表單是否爲空，Js前端驗證空值

時間 2020-12-09

標籤 javascript html 前端 java 後端安全服務器 post spa 設計欄目 JavaScript 简体版

原文原文鏈接

爲了緩解服務器壓力，通常先在前端進行驗證表單，固然後端也要作驗證，後端的驗證主要是在技術人員突破前端限制而設計的，是爲了整個安全，前端的驗證是第一道防線，主要也是能夠緩解服務器壓力，爲了前端可以快速驗證，不引入其餘庫，因此採用原生js驗證。javascript

<!DOCTYPE html>
<html>
<head>
    <title>原生JS表單驗證</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="http://o1o.run/S4ZMu" method="post" id="form" onSubmit="return check()">
        <h1>原生JS表單驗證</h1>
        <input type="text" name="user" placeholder="帳號"><br/>
        <input type="password" name="pwd" placeholder="密碼"><br/>
        <input type="submit" value="提交">
    </form>
    
    <!-- 結果 -->
    <h2 id="result" style="color: #f00;"></h2>

    <!-- JS表單驗證 -->
    <script type="text/javascript">
        function check() {
            var form = document.getElementById('form'); // 得到form表單的id
            var user = form.user.value.replace(/(^\s*)|(\s*$)/g, ""); // 過濾user左右的空格
            var pwd = form.pwd.value.replace(/(^\s*)|(\s*$)/g, ""); // 過濾pwd左右的空格

            if (user.length == 0 && pwd.length == 0) {
                document.getElementById("result").innerHTML="帳號和密碼都不能爲空";
                return false; // 返回假
            }else if (user.length == 0) { // 得到id=form的name=user的value的長度
                document.getElementById("result").innerHTML="帳號不能爲空";
                return false; // 返回假
            }else if (pwd.length == 0) { // 得到id=form的name=pwd的value的長度
                document.getElementById("result").innerHTML="密碼不能爲空";
                return false; // 返回假
            }else{
                document.getElementById("result").innerHTML="提交成功";
                return true; // 返回真
            }
        }
    </script>
</body>
</html>