<html>
<head>
<meta http-equiv="Content-Type;charset=utf-8"/>
<title>Function Curry</title>
<style type="text/css">
#user,#pwd
{<!-- -->
color:red;
font-size: 14px;
}
</style>
</head>
<body>
<!--
verify="username|required" is the rule you want to add
-->
<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="Submit"/>
</form>
<script type="text/javascript">
function form(arr)
{<!-- -->
//Indicates the legality of each input
var status=[];
//Pre-save form item rules
var verifylist={<!-- -->
digit:function(val){<!-- -->
return{<!-- -->
msg:'Illegal number',
reg:/\d + /
}
},
email:function(val){<!-- -->
return{<!-- -->
msg:'Illegal number',
reg:/\d + /
}
},
phone:function(val){<!-- -->
return {<!-- -->
msg:'Illegal phone number',
reg:/^1(3|4|5|6|7|8|9)\d{9$}/
}
},
required:function(val)
{<!-- -->
return {<!-- -->
msg:'Not empty',
reg:/\S/
}
}
};
//Storage the incoming resource rules
this.verify=arr;
//Get the first form
var form=document.forms[0];
//Save resource rules into private rule objects, add them if they are not, and replace them if they are, also called initialization rules.
this.addVerify=function()
{<!-- -->
this.verify.forEach(function(item,index,array){<!-- -->
verifylist[item.name]=item.verify;
});
}
//Get the privileged function of the private rule object
this.getverify=function()
{<!-- -->
return verifylist
}
//Initialize the form element and bind the focus loss event to each 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);
};
//Initialize the state of each input
status[key]=false;
}
}
};
//Verify each value of the form, the error message follows the input box
this.validation=function(key)
{<!-- -->
var value=key.value;
//Get the verify rules of the input box
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);
//Each rule displays its own error message
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;
}
});
};
//Submit button event. When the status status is true, it indicates that each input value has passed verification and the form can be submitted. If it is false, submission is prohibited.
this.submitform=function(){<!-- -->
form.elements.btn.onclick=function(){<!-- -->
// console.log(Object.values(status)[0]);
if(Object.values(status)[0]==true)
{<!-- -->
form.submit();
alert('Submission successful');
}else
{<!-- -->
alert("The form is incorrect and submission failed");
}
};
};
}
//Resource rules, add after the input box, separated by |
var ver=[
{<!-- -->
name:'username',
verify:function(val){<!-- -->
return {<!-- -->
msg:'Username is 4-16 characters',
reg:/^[a-z0-9_-]{4,16}$/
}
}
},
{<!-- -->
name:'password',
verify:function(val){<!-- -->
return {<!-- -->
msg:'At least 6 characters',
reg:/(\S + ){6,}$/
}
}
}
];
var f=new form(ver);
f.init();
f.submitform();
</script>
</body>
</html>