javascript 封装表单函数，验证规则，然后提交

<html><head><meta http-equiv="Content-Type;charset=utf-8"/><title>函数柯里化</title><style type="text/css"> #user,#pwd {color:red;font-size: 14px;}</style></head><body><!--verify="username|required“为你要添加的规则--><form id="form1" method="post" action=""><input type="text" name="user" value="" verify="username|required" size=20/><span id="user"></span><br/><input type="password" name="pwd" value="" verify="password|required" size=20/><span id="pwd"></span><br/><input type="button" name="btn" value="提交"/></form><script type="text/javascript">function form(arr){//表示每个input的合法性var status=[];//预存表单项目规则var verifylist={digit:function(val){return{msg:'非合法数字',reg:/\d+/}},email:function(val){return{msg:'非合法数字',reg:/\d+/}},phone:function(val){return {msg:'非合法电话',reg:/^1(3|4|5|6|7|8|9)\d{9$}/}},required:function(val){return {msg:'不为能空',reg:/\S/}}};//存储传入的资源规则this.verify=arr;//获取第1个表单var form=document.forms[0];//把资源规则存入面有私有规则对象当中，无则加入，有则替代，也叫初始化规则this.addVerify=function(){this.verify.forEach(function(item,index,array){verifylist[item.name]=item.verify;});}//获取私有规则对象的特权函数this.getverify=function(){return verifylist}//初始化表单元素，为每个input绑定失去焦点事件this.init=function(){this.addVerify();var that=this;for(const key of form.elements){if(key.name!="btn"){key.onblur=function(event){that.validation(key);};//初始化每个input的状态status[key]=false;}}};//验证表单每个值，错误信息跟随在input框后面this.validation=function(key){var value=key.value;//获取input框的verify规则var rule=key.getAttribute('verify');var rs=rule.split('|');var that=this;rs.forEach(function(item,index,array){var x=that.getverify()[item];var reg=RegExp(x().reg);let msgSpan=document.getElementById(key.name);//各规则显示自己的错误信息switch(item){case 'username': if(!reg.test(value)){msgSpan.innerHTML=x().msg;status[key]=false;}else{msgSpan.innerHTML='';status[key]=true;}break;case 'password': if(!reg.test(value)){msgSpan.innerHTML=x().msg;status[key]=false;}else{msgSpan.innerHTML='';status[key]=true;}break;  case  'required': if(!reg.test(value)){msgSpan.innerHTML=x().msg;status[key]=false;}break;}});};//提交按钮事件，status状态为true时表明各input值都通过验证可以提交表单，如果为false时则禁止提交this.submitform=function(){form.elements.btn.onclick=function(){// console.log(Object.values(status)[0]);if(Object.values(status)[0]==true){form.submit();alert('提交成功');}else{alert("表单不正确,提交失败");}};};}//资源规则，在input框后面添加，以|为分隔var ver=[{name:'username',verify:function(val){return {msg:'用户名为4-16位',reg:/^[a-z0-9_-]{4,16}$/}}},{name:'password',verify:function(val){return {msg:'最少6位',reg:/(\S+){6,}$/}}}];var f=new form(ver);f.init();f.submitform();</script></body>
</html>