原生Js表单验证,Js验证表单是否为空,Js前端验证空值

TANKING

为了缓解服务器压力,一般先在前端进行验证表单,当然后端也要做验证,后端的验证主要是在技术人员突破前端限制而设计的,是为了整个安全,前端的验证是第一道防线,主要也是可以缓解服务器压力,为了前端能够快速验证,不引入其他库,所以采用原生js验证。

<!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>

image.png
image.png
image.png
image.png

Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-12-08
WeChat:face6009

阅读 1.2k

WeChat1:sansure2016

4k 声望
193 粉丝
0 条评论
你知道吗?

WeChat1:sansure2016

4k 声望
193 粉丝
宣传栏