一个表单小应用

来源：互联网发布：中国电视台知乎编辑：程序博客网时间：2024/05/21 20:21

实现一个表单：通过电话号码+密码登录，并通过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