这里主要利用生成器函数生成配置的表单字段;然后设置验证规则;验证用户填写的数据信息;
验证通过后,利用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:'账 号 ',className:'regInput'},
{name:'email',type:'email',placeholder:'电子邮件',label:'邮 件 ',className:'regInput'},
{name:'pwd',type:'password',label:'密 码 ',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('表单验证失败');
}
});
//有端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>
后端代码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';
}
?>