效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding:0; margin:0}
</style>
</head>
<body>
<form id="f" method="post" action="regSave.php">
身份证号码:<input id="txtId" type="text" value="612301197000000000"><br/>
电话号码:<input id="txtPhone" type="text" value="18991274261"><br/>
电邮:<input id="txtEmail" type="text" value="7701037@qq.com"><br/>
<input type="submit" value="注册">
</form>
<div id="msgBox">
</div>
</body>
</html>
<script type="text/javascript">
//策略模式的代码开始
var validator = {
//写验证类型(描述了所有类型数据的验证规则)
types:{},
//验证的数据类型(针对不同类型的数据,选择不同的验证规则)
config:{},
//存放所有错误信息的数组
errMsg:[],
//验证函数(传入若干数据,一次性验证完成)
//模拟一下data参数
validator:function (data) {
this.errMsg=[];
for(let key in data){
if(!this.types[this.config[key]].validator(data[key])){
this.errMsg.push(this.types[this.config[key]].errorMsg);
}
}
}
};
//策略模式的代码结束
//给策略模式里增加策略开始
validator.types.isEmail ={
validator:function(value){
var reg = /^[\w\.]+@\w+(\.com|\.net|\.cn|\.com\.cn)$/;
return reg.test(value);
},
errorMsg:"邮箱格式不合法,合法的邮箱格式如:7701037@qq.com"
};
validator.types.isPhone ={
validator:function(value){
var reg = /^1[34578]\d{9}$/;
return reg.test(value);
},
errorMsg:"手机格式不合法,长度为11位的数字,而且必须以1开头"
};
validator.types.isId ={
validator:function(value){
var reg = /^[1-9]\d{16}[\dX]$/;
return reg.test(value);
},
errorMsg:"身份证号码不合法"
}
//给策略模式里增加策略结束
//“数据类型”和验证策略的对应关系
validator.config={
"id":"isId",
"email":"isEmail",
"phone":"isPhone",
};
function $(id) {
return document.getElementById(id);
}
//进行表单验证
function checkAll(){
//1、组织数据成json格式(获取文本框的内容)
var d = {
"email":$("txtEmail").value,
"phone":$("txtPhone").value,
"id":$("txtId").value
};
validator.validator(d);
if(validator.errMsg.length>0){
//把所有的错误信息放入到div里(msgBox)
let htmlStr="";
for(let i in validator.errMsg){
htmlStr+= validator.errMsg[i]+"<br/>";
}
$("msgBox").innerHTML = htmlStr;
return false;
}else{
return true;
}
}
window.onload = function(){
$("f").onsubmit = function(){
/*
写法一:
//1、前端验证
if(!checkAll()){
//2、不通过则不提交
return false;//阻止事件的默认行为
}
*/
//写法二:
return checkAll();
}
}
</script>