在前端进行form表单数值校验

最新推荐文章于 2024-05-11 02:50:29 发布

W金刚葫芦娃W

最新推荐文章于 2024-05-11 02:50:29 发布

阅读量754

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_39330735/article/details/128262275

版权

一、该方法在前端针对提交上来得表单数据进行判断，满足所设置的条件，在跳转后端进行数据验证。

<body>
<!--onsubmit事件是在提交表单时触发-->
<!-- return 一个函数：是指当函数的返回值位false时，表单不提交，为true时提交-->
<form action="./denglu/login.php" method="post" target="_blank" onsubmit="return chack_lenth_user(this)">
    <!--mySumit函数中的参数this是指form调用该函数时会将form传入函数中-->
            <input type="text" name="user" >
            <input type="submit" name="submit" >	
        </form>
        <script>
            function chack_lenth_user(form){
            // <!--定义formData对象-->
                let formData = new FormData(form);
                // <!--利用fromData对象的get方法获取表单数据-->
                let username = formData.get('user');
                // <!--进行一些判断或者操作-->
                if(username.length < 5){
                    alert('用户名不得小于5位');
                    return false;
                }else{
                    return true;
                }
                return false;
    
            }
        </script>
</body>