一个表单小应用

作者：手机用户2502859523 | 来源：互联网 | 2023-10-12 15:01

实现一个表单：通过电话号码+密码登录，并通过iframe无刷新提交表单数据。源代码：<!DOCTYPEhtml><html><head><

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

源代码：


<html>
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <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 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

一个表单小应用

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

运行结果：

Python + Pytest 接口自动化测试中 Token 关联登录的实现方法

MFC与ADO结合实现存储过程调用

使用Fetch进行HTTP请求的基本示例

字符串中特定字符的移除方法

Python 中 Pmagick 的木炭滤镜方法

采用IKE方式建立IPsec安全隧道

丽江客栈选择问题

如何在 Angular 6 HttpClient 中获取响应头

深入理解Vue.js：从入门到精通

Redux入门指南

云函数与数据库API实现增删查改的对比

HTML5 Canvas 画板功能详解及实现方法

深入解析SpringMVC核心组件：DispatcherServlet的工作原理

解决C# Windows Forms客户端连接SignalR服务器时出现的错误

ssm 框架整合及工程分层