WEB前端-JQuery-表单验证

最新推荐文章于 2022-05-01 21:22:54 发布

白金牧场

最新推荐文章于 2022-05-01 21:22:54 发布

阅读量1.3k

点赞数 1

分类专栏： Web-Dev相关 WEB三把刀使用介绍文章标签： web前端表单 dom jQuery 验证

本文链接：https://blog.csdn.net/qq_34409701/article/details/52420401

版权

Web-Dev相关同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

WEB三把刀使用介绍

14 篇文章 3 订阅

订阅专栏

以下是分别以两种方式 DOM& jQuery绑定事件，并对表单内容进行简要验证的代码
可以通过js的表单验证减少与后台数据交互验证的动作，从而减少响应时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>

</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        /*dom绑定事件方式
        function CheckValid(){
            var flag = true;
            $('form .c1').each(function(){
                var val = $(this).val();
                if(val.length<=0){
                    var label = $(this).attr('name');
                    var tag = document.createElement('span');
                    tag.innerText = label + " cannot be empty";
                    $(this).after(tag);
                    flag = false;
                }
            });
            return flag;
        }*/
        /*jquery 绑定方式*/
        $(function(){
            BindCheckValid();
        });
        function BindCheckValid(){
            $('form input[type=submit]').click(function(){
                var flag = true;
                $('form .c1').each(function(){
                    var val = $(this).val();
                    if(val.length<=0){
                        var label = $(this).attr('name');
                        var tag = document.createElement('span');
                        tag.innerText = label + " cannot be empty";
                        $(this).after(tag);
                        flag = false;
                    }
                });
            return flag;
            });
        }
    </script>
</body>
</html>

白金牧场

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
WEB前端-JQuery-表单验证

以下是分别以两种方式 DOM& jQuery绑定事件，并对表单内容进行简要验证的代码可以通过js的表单验证减少与后台数据交互验证的动作，从而减少响应时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .item{
复制链接

扫一扫