一个表单小应用

最新推荐文章于 2022-06-27 07:27:33 发布

英子的搬砖日志

最新推荐文章于 2022-06-27 07:27:33 发布

阅读量346

点赞数

分类专栏： JavaScript 文章标签：表单 iframe 登录界面

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/76209132

版权

JavaScript 专栏收录该内容

46 篇文章 10 订阅

订阅专栏

实现一个表单：通过电话号码+密码登录，并通过iframe无刷新提交表单数据。

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        body, button, input, legend{
            margin: 0;
            padding: 0;
            font: 16px "微软雅黑";
        }
        .m-form{
            margin: 150px auto;
            width: 325px;
            border: 1px solid #ddd;
        }
        .m-form legend{
            width: 100%;
            line-height: 30px;
            text-indent: 1em;
            color: #fff;
            background-color: #2d2d2d;
        }
        .m-form fieldset{
            border: none;
            padding: 20px;
        }
        .m-form div{
            margin: 20px;
        }
        .m-form button{
            width: 100%;
            height: 30px;
            color: #fff;
            border: 1px solid #ddd;
            cursor: pointer;
            background-color: #2d7dca;
        }
        .m-form .msg{
            margin:5px;
            text-align:center;
            display:none;
        }
        .m-form .tip{
            padding-left:6em;
            font-size:12px;
            color:#C0C0C0;
        }
        .m-form .j-err{
            display:block;
            color:#FF0000;
        }
        .m-form .j-suc{
            display:block;
            color:#158226;
        }
        .m-form .u-txt{
            width: 160px;
            padding: 3px;
            border:1px solid #aaa;
        }
        .m-form .j-error{
            border-color: #f00;
            background-color: #FFE7E7;
        }
        .m-form .j-disabled{
            cursor: default;
            background-color: #ddd;
        }
    </style>
</head>
<body>

    <form action="./login" class="m-form" name="loginForm" target="result" autocomplete="off">
        <!--表单顶部-->
        <legend>手机号码登录</legend>
        <fieldset>
            <!--错误提示信息-->
            <div class="msg" id="message"></div>
            <!--输入手机号码-->
            <div>
                <label for="telephone">手机号：</label>
                <input id="telephone" name="telephone" type="tel" class="u-txt" maxlength="11" required pattern="^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$"><br/>
                <span class="tip">11位数字手机号码</span>
            </div>
             <!--密码输入-->
            <div>
                <label for="password">密　码：</label>
                <input id="password" name="password" type="password" class="u-txt"><br/>
                <span class="tip">至少6位，同时包含数字和字母</span>
            </div>
            <!--登录提交按钮-->
            <div>
                <button name="loginBtn">登　录</button>
            </div>
        </fieldset>
    </form>

     <!--通过iframe无刷新提交表单-->
    <iframe name="result" id="result" style="display:none;"></iframe>

    <script>
        (function(){
            var form = document.forms.loginForm,
                nmsg = document.getElementById('message');

            // 密码加密
            function md5(msg){
                return msg;
            }

            // 显示信息
            function showMessage(clazz,msg){
                if (!clazz){
                    nmsg.innerHTML = '';
                    nmsg.classList.remove('j-suc');
                    nmsg.classList.remove('j-err');
                }else{
                    nmsg.innerHTML = msg;
                    nmsg.classList.add(clazz);
                }
            }

            // 禁用提交按钮
            function disableSubmit(disabled){
                form.loginBtn.disabled = !!disabled;
                var method = !disabled?'remove':'add';
                form.loginBtn.classList[method]('j-disabled');
            }

            // 手机号验证失败
            function invalidInput(node,msg){
                showMessage('j-err',msg);
                node.classList.add('j-error');
                node.focus();
            }

            // 清除原来的状态
            function clearInvalid(node){
                showMessage();
                node.classList.remove('j-error');
            }

             // 验证手机号
            form.telephone.addEventListener('invalid',function(event){
                    event.preventDefault();
                    var input = form.telephone;
                    invalidInput(input,'请输入正确的手机号码');
            });

            // 状态恢复
            form.addEventListener('input',function(event){

                    clearInvalid(event.target); // 还原错误状态
                    disableSubmit(false);       // 还原登录按钮状态
            });

            // 验证密码
            form.addEventListener('submit',function(event){
                    var input = form.password,
                        pswd = input.value,
                        emsg = '';
                    if (pswd.length<6){
                        emsg = '密码长度必须大于6位';
                    }else if(!/\d/.test(pswd)||!/[a-z]/i.test(pswd)){
                        emsg = '密码必须包含数字和字母';
                    }
                    if (!!emsg){              // 密码验证不通过
                        event.preventDefault();
                        invalidInput(input,emsg);
                        return;
                    }
                    input.value = md5(pswd);  // 加密密码
                    disableSubmit(true);      // 禁用提交按钮
                }
            );

            // 利用iframe无刷新提交表单
            var frame = document.getElementById('result');
            frame.addEventListener('load',function(event){
                    try{
                        var result = JSON.parse(frame.contentWindow.document.body.textContent);
                        // 还原登录按钮状态
                        disableSubmit(false);
                        // 识别登录结果
                        if (result.code===200){
                            showMessage('j-suc','登录成功！');
                            form.reset();
                        }
                    }catch(ex){
                        // ignore
                    }
                }
            );

        })();
    </script>
</body>
</html>

{
    "code": 200,
    "result":{
        "id": 200000,
        "username":"test"
    }
}

运行结果：

电话号码输入不对时：

这里写图片描述

密码不对时：

这里写图片描述

电话号码和密码都正确的，点击登录按钮：

这里写图片描述

github地址：

https://github.com/Xganying/JavaScript/tree/master/%E8%A1%A8%E5%8D%95%E5%B0%8F%E5%BA%94%E7%94%A8

英子的搬砖日志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个表单小应用

实现一个表单：通过电话号码+密码登录，并通过iframe无刷新提交表单数据。
复制链接

扫一扫

专栏目录