devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

yield生成器生成表单字段，并进行验证，利用fetch方法和formData对象传递数据给后端，后端返回成功，返回数据

作者：煮酒与君饮 | 2024-08-22 19:34:44

赞

踩

yield生成器生成表单字段，并进行验证，利用fetch方法和formData对象传递数据给后端，后端返回成功，返回数据

这里主要利用生成器函数生成配置的表单字段；然后设置验证规则；验证用户填写的数据信息；
验证通过后，利用fetch异步传递方法将formdata数据传给后端；后端再进行验证返回数据
formfieldgenerator.js文件


//生成器函数，主要用于生成表单的各字段
//参数fields是字段配置表
function * formFieldGenerator(fields)
{
    for(const field of fields)
    {
        let fieldHtml='';
        switch(field.type)
        {
            case 'text':
            case 'email':
            case 'password':
                fieldHtml=`<div class="${field.className||''}"><label>${field.label} <input type="${field.type}" name="${field.name}" value="${field.value||''}" placeholder="${field.placeholder||''}" autocomplete="off"></label><p id="${field.name}"></p></div>`;
                break;
            case 'textarea':
                fieldHtml=`<div class="${field.className||''}"><label>${field.label}<textarea name="${field.name}" rows="${field.rows||5}" cols="${field.cols||10}" placeholder="${field.placeholder||''}"></textarea></label></div>`;
                break;
            case 'checkbox':
                fieldHtml=`<label><input type="${field.type}" name="${field.name}" value="${field.value}">${field.label}</label>`;  
                break;
            case 'submit':
                fieldHtml=`<div class="${field.className||''}"><label><input type="submit" name="${field.name}" id="${field.id}" value="${field.value}"></label></div>`;
                break;
            case 'button':
                fieldHtml=`<div class="${field.className||''}"><label><input type="button" name="${field.name}" id="${field.id}" value="${field.value}"></label></div>`;
                break;
            default:
                fieldHtml=`<!--不支持的字段类型：${field.type}>`;                          
        }
        //最后一定要yield fieldHtml
        yield fieldHtml;
    }
}
//验证各字段用户填写的数据，如果验证没通过isValid返回假，验证通过isValid返回true
function validateForm(formData)
{
    let isValid=true;
    //各段的错误信息
    let msg={
        usernameMsg:'',
        pwdMsg:'',
        pwd2Msg:'',
        emailMsg:'',
    };
   
    let firtPwd='';
    for(const field of formData)
    {
        const inputEle=document.querySelector(`[name="${field.name}"]`);
        
        if(!inputEle){continue;}
        //获取字段名进行验证
        switch(field.name)
        {
            case 'username':
                let user=document.getElementById('username');
                if(inputEle.value.trim().length<=4 || inputEle.value.trim().length>=21)
                {
                    isValid=false;
                    msg.usernameMsg='账户介于5-20个字符之间';
                }
                if(/^[\u4e00-\u9fa5]+$/.test(inputEle.value.trim()))
                {
                    isValid=false;
                    msg.usernameMsg='账户不支持汉字';
                }
                if(msg.usernameMsg!=='')
                {
                    user.innerText=msg.usernameMsg;
                }else
                {
                    msg.usernameMsg='';
                    user.innerText='';
                    user=null;
                }
                formdata.append('username',inputEle.value.trim());
                break;
            case 'pwd':
                let p2=document.getElementById('pwd');
                if(inputEle.value.trim().length<6||inputEle.value.trim().length>21)
                    {
                        isValid=false;
                        msg.pwdMsg='密码介于6-20个字符';
                    } 
                if(!/[A-Z]/.test(inputEle.value.trim()))
                    {
                        isValid=false;
                        msg.pwdMsg='密码必须包含大写字符';
                    } 
                if(msg.pwdMsg!=='')
                    {
                        p2.innerText=msg.pwdMsg;
                    }else
                    {
                        msg.pwdMsg='';
                        p2.innerText='';
                        p2=null;
                    }
                    firtPwd=inputEle.value.trim();
                    formdata.append('pwd',inputEle.value.trim());
                break;
            case 'pwd2':
                let p3=document.getElementById('pwd2');
                if(inputEle.value.trim().toString()!==firtPwd.toString())
                    {
                        isValid=false;
                        msg.pwd2Msg='两次密码不一致';
                    }
                if(msg.pwd2!=='')
                    {
                        p3.innerText=msg.pwd2Msg;
                    }else
                    {
                        msg.pwd2Msg='';
                        p3.innerText='';
                        p3=null;
                    }    
                break; 
            case 'email':
                let mail=document.getElementById('email');
                if(inputEle.value.trim()==='')
                    {
                        isValid=false;
                        msg.emailMsg='邮件不能为空';
                    }                 
                if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/.test(inputEle.value.trim()))
                    {
                        isValid=false;
                        msg.emailMsg='邮件格式不正确';
                    }    
                if(msg.emailMsg!=='')
                    {
                        
                        mail.innerText=msg.emailMsg;
                    }else
                    {
                        mail.innerText='';
                        msg.emailMsg='';
                        mail=null;
                    }
                    formdata.append('email',inputEle.value.trim());
                break;        
        }
    }
    //所有验证都通过则返回true
    return isValid;
}
//字段配置表，根据自己的需要进行配置
const formFields=[
    {name:'username',type:'text',placeholder:'用户名',label:'账&emsp;号&emsp;',className:'regInput'},
    {name:'email',type:'email',placeholder:'电子邮件',label:'邮&emsp;件&emsp;',className:'regInput'},
    {name:'pwd',type:'password',label:'密&emsp;码&emsp;',className:'regInput'},
    {name:'pwd2',type:'password',label:'重复密码',className:'regInput'},
    {name:'checkbox',name:'agree',type:'checkbox',label:'同意条款',value:'yes'},
    {name:'btn',type:'submit',value:'提交',id:'btn1',className:'regInput'},
    
];

//创建表单
const formHtml=document.createElement('form');
//设置表单属性
formHtml.setAttribute('method','post');
formHtml.setAttribute('name','form1');
formHtml.setAttribute('id','form1');
//将表单字段做为参数给到生成器函数，并添加入表单
formHtml.innerHTML=Array.from(formFieldGenerator(formFields)).join('');
let container=document.getElementById('container');
//做为字元素添加到html内
container.appendChild(formHtml);

let btn=document.getElementById('btn1');
//为表单添加事件
formHtml.addEventListener('submit',function(event){
    
    event.preventDefault();
    //除去提交按钮
    const formData=formFields.filter(field=>field.type!=='submit');
    //如果验证都通过则将表单给FormData()对象进行序列化
   if(validateForm(formData))
   {
   //防止第2次提交，禁止提交按钮
    btn.disabled=true;
    let form1=document.getElementById('form1');
    
    let formVal=new FormData(form1);
    //检查FormData()对象里面的是否有表单各项与值
    for(let xx of formVal.entries())
        {
            console.log(xx);
        }
        //添加标头，如果是FormData()提交一要写form-data，千万不能写错了，其它的后端接收不到值为空
        //你也可以不写标头，让fetch自行判断
    let jsonheader=new Headers({
        "Content-Type":"application/form-data"
    });
        fetch('formfieldgenerator.php',{
            method:'POST',
            body:formVal
        })
        .then((response)=>{
            if(response.ok && response.status===200)
                {
                    return response.json();
                }
            throw new Error('返回数据错误');    
        })
        .then((data)=>{
            let result=JSON.stringify(data);
            let res=JSON.parse(result);
            console.log(res.username);
        }).catch(error=>{
            console.log('连接服务器时发生错误！',error);
        })
        
   }else
   {
    
        console.log('表单验证失败');
   }
    
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222

//有端index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        
        <title>用生成器生成表单</title>
        <style type="text/css">
            #container
            {
                width: 1050px;
                margin: 5px auto;
                border: 1px solid red;
                text-align: center;
                font-size: 16px;
                padding-top:10px;
            }
            .regInput
            {
                margin-bottom: 15px;
            }
            .regInput label
            {
                font-family: Arial, Helvetica, sans-serif;
            }
            .regInput input
            {
                text-indent: 5px;
                
            }
            .btn1
            {
                margin-top: 15px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            
        </div>
        <script src="formfieldgenerator.js"></script>
    </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

后端代码formfieldgenerator.php

<?php

if($_SERVER['REQUEST_METHOD']==='POST')
{
    $username=$_POST['username'];
    $pwd=$_POST['pwd'];
    $email=$_POST['email'];
    if(isset($username) && isset($pwd) && isset($email))
    {
        $data=array('username'=>$username,'pwd'=>$pwd,'email'=>$email);
        echo json_encode($data);
    }else
    {
        echo '没有';
    }
    
}else
{
    echo 'no';
}

?>    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/1017709
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号