客户端表单验证js
写了个前台表单验证的js,拿来分享一下。
实现的功能:对于注册到验证器中的控件,按照注册类型进行检验,如果输入符
实现的功能:对于注册到验证器中的控件,按照注册类型进行检验,如果输入符
合规则哪么在该控件右侧提示输入正确的信息,否则提示错误信息。Date类型只
是验证形式,有待改进。
【原创】转载请注明出处!
//输入框类型
var inputType={
email:"email",
date:"date",
number:"number",
phone:"phone",
password:"password",
rePassword:"rePassword",
submit:"submit",
notEmpty:"notEmpty",
canEmptyIsEmail:"emptyEmail",
canEmptyIsPhone:"emptyPhone"
}
var validator=new validatorObj();
function validatorObj(){
this.inputs=new Array();
//显示信息span的id后缀:对应空间id+show
this.suffix="show";
this.password={};
this.rePassword={};
this.submit={};
//输入框对应的正则表达式
this.getRegex=function(type){
var reg=null;
switch(type)
{
case inputType.email:
reg=/^(\w|\d)+@(\w|\d)+(\.(\w|\d)+)+$/;break;
case inputType.date:
reg=/^\d{4}-\d{1,2}-\d{1,2}$/;break;
case inputType.number:
reg=/^\d+$/;break;
case inputType.phone:
reg=/^(\d{8}|(\d{3,4}-\d{8})|\d{11})$/;break;
case inputType.password:
reg=/.+/;break;
case inputType.notEmpty:
reg=/.+/;break;
case inputType.canEmptyIsEmail:
reg=/^(\s?|((\w|\d)+@(\w|\d)+(\.(\w|\d)+)+))$/;break;
case inputType.canEmptyIsPhone:
reg=/^(\s?|((\d{8}|(\d{3,4}-\d{8})|\d{11}){1}))$/;break;
}
return reg;
}
//输入不符合规则显示的错误信息
this.getErrorMessage=function(type){
var em="";
switch(type)
{
case inputType.email:
em="Email格式不正确!如:xxx@xx.xx";break;
case inputType.date:
em="日期格式不正确!如:2008-08-08";break;
case inputType.number:
em="必须为数字!";break;
case inputType.phone:
em="电话号码格式不正确!";break;
case inputType.rePassword:
em="两次输入的密码不一致!请重新输入!";break;
default:
em="输入数据不符合要求!";break;
}
return "<font color=\"red\">"+em+"</font>";
}
//输入框获得焦点的提示信息
this.getSuggestMessage=function(type){
var rm="";
switch(type)
{
case inputType.email:
rm="请输入正确的Email格式!如:xxx@xx.xx";break;
case inputType.date:
rm="请输入合法日期!";break;
case inputType.number:
rm="请输入内容必须为数字!";break;
case inputType.phone:
rm="请输入合法的电话!";break;
case inputType.password:
rm="请输入密码!";break;
case inputType.rePassword:
rm="请确认密码!";break;
default:
rm="请输入合法数据!";break;
}
return "<font color=\"#666666\">"+rm+"</font>";
}
//输入正确提示信息
this.getRightMessage=function(type){
return "<font color=\"green\">输入信息格式正确!</font>";
}
//添加文本框对应的提示信息节点
this.setShowLabel=function(id){
var label=document.createElement("<span>");
label.setAttribute("id",id+this.suffix);
document.getElementById(id).parentNode.appendChild(label);
return label;
}
//设置提交按钮的状态
this.setSubmit=function(){
var disabled=true;
var type="";
for(ele in this.inputs)
{
if(this.inputs[ele].type==inputType.rePassword)
{
disabled=(validator.rePassword.value==validator.password.value)&&disabled;
}
else
{
if(this.inputs[ele].type!=inputType.submit)
{
disabled=validator.getRegex(this.inputs[ele].type).test(document.getElementById(this.inputs[ele]["id"]).value)&&disabled;
}
}
if(!disabled)break;
}
this.submit.disabled=!disabled;
}
//设置文本框获得焦点响应事件
this.setFocusFunc=function(id,type,label){
document.getElementById(id).onfocus=function(){label.innerHTML=validator.getSuggestMessage(type);}
}
//设置文本框失去焦点的响应事件
this.setBlurFunc=function(id,type,label){
//重复密码文本框onfocus方法
if(type==inputType.rePassword){
document.getElementById(id).onblur=function(){
var ele=validator.password;
if(ele.value==null||ele.value=="")
{
label.innerHTML="<font color='red'>在此处确认密码!</font>";
}
else
{
if(ele.value!=document.getElementById(id).value)
{
label.innerHTML="<font color='red'>两次输入的密码不一致,请重新输入!</font>";
}
else
{
label.innerHTML=validator.getRightMessage(type);
}
}
validator.setSubmit();
}
return;
}
//普通文本框onfocus方法
document.getElementById(id).onblur=function(){
if(validator.getRegex(type).test(document.getElementById(id).value))
{
label.innerHTML=validator.getRightMessage(type);
}
else
{
if(this.value==""||this.value==null)
{
label.innerHTML="<font color='red'>输入内容不能为空!</font>";
}
else
{
label.innerHTML=validator.getErrorMessage(type);
}
}
if(type==inputType.password)
{
validator.rePassword.onblur();
}
validator.setSubmit();
}
}
//对单个文本框注册
this.registor=function(id,type){
var element=document.getElementById(id);
if(!this.inputs[id])
{
this.inputs[id]=new Array();
this.inputs[id]["id"]=id;
this.inputs[id]["type"]=type;
if(type==inputType.password)this.password=element;
if(type==inputType.rePassword)this.rePassword=element;
if(type==inputType.submit)
{
this.submit=element;
}
var label=this.setShowLabel(id);
this.setFocusFunc(id,type,label);
this.setBlurFunc(id,type,label);
}
}
//对文本框数组注册
this.registorAll=function(arr){
for(var i=0;i<arr.length;i++)
{
this.registor(arr[i][0],arr[i][1]);
}
validator.setSubmit();
}
//移除对文本框注册
this.remove=function(id){
if(this.inputs[id])
{
this.inputs[id]=null;
}
}
}
【原创】转载请注明出处!
//输入框类型
var inputType={
email:"email",
date:"date",
number:"number",
phone:"phone",
password:"password",
rePassword:"rePassword",
submit:"submit",
notEmpty:"notEmpty",
canEmptyIsEmail:"emptyEmail",
canEmptyIsPhone:"emptyPhone"
}
var validator=new validatorObj();
function validatorObj(){
this.inputs=new Array();
//显示信息span的id后缀:对应空间id+show
this.suffix="show";
this.password={};
this.rePassword={};
this.submit={};
//输入框对应的正则表达式
this.getRegex=function(type){
var reg=null;
switch(type)
{
case inputType.email:
reg=/^(\w|\d)+@(\w|\d)+(\.(\w|\d)+)+$/;break;
case inputType.date:
reg=/^\d{4}-\d{1,2}-\d{1,2}$/;break;
case inputType.number:
reg=/^\d+$/;break;
case inputType.phone:
reg=/^(\d{8}|(\d{3,4}-\d{8})|\d{11})$/;break;
case inputType.password:
reg=/.+/;break;
case inputType.notEmpty:
reg=/.+/;break;
case inputType.canEmptyIsEmail:
reg=/^(\s?|((\w|\d)+@(\w|\d)+(\.(\w|\d)+)+))$/;break;
case inputType.canEmptyIsPhone:
reg=/^(\s?|((\d{8}|(\d{3,4}-\d{8})|\d{11}){1}))$/;break;
}
return reg;
}
//输入不符合规则显示的错误信息
this.getErrorMessage=function(type){
var em="";
switch(type)
{
case inputType.email:
em="Email格式不正确!如:xxx@xx.xx";break;
case inputType.date:
em="日期格式不正确!如:2008-08-08";break;
case inputType.number:
em="必须为数字!";break;
case inputType.phone:
em="电话号码格式不正确!";break;
case inputType.rePassword:
em="两次输入的密码不一致!请重新输入!";break;
default:
em="输入数据不符合要求!";break;
}
return "<font color=\"red\">"+em+"</font>";
}
//输入框获得焦点的提示信息
this.getSuggestMessage=function(type){
var rm="";
switch(type)
{
case inputType.email:
rm="请输入正确的Email格式!如:xxx@xx.xx";break;
case inputType.date:
rm="请输入合法日期!";break;
case inputType.number:
rm="请输入内容必须为数字!";break;
case inputType.phone:
rm="请输入合法的电话!";break;
case inputType.password:
rm="请输入密码!";break;
case inputType.rePassword:
rm="请确认密码!";break;
default:
rm="请输入合法数据!";break;
}
return "<font color=\"#666666\">"+rm+"</font>";
}
//输入正确提示信息
this.getRightMessage=function(type){
return "<font color=\"green\">输入信息格式正确!</font>";
}
//添加文本框对应的提示信息节点
this.setShowLabel=function(id){
var label=document.createElement("<span>");
label.setAttribute("id",id+this.suffix);
document.getElementById(id).parentNode.appendChild(label);
return label;
}
//设置提交按钮的状态
this.setSubmit=function(){
var disabled=true;
var type="";
for(ele in this.inputs)
{
if(this.inputs[ele].type==inputType.rePassword)
{
disabled=(validator.rePassword.value==validator.password.value)&&disabled;
}
else
{
if(this.inputs[ele].type!=inputType.submit)
{
disabled=validator.getRegex(this.inputs[ele].type).test(document.getElementById(this.inputs[ele]["id"]).value)&&disabled;
}
}
if(!disabled)break;
}
this.submit.disabled=!disabled;
}
//设置文本框获得焦点响应事件
this.setFocusFunc=function(id,type,label){
document.getElementById(id).onfocus=function(){label.innerHTML=validator.getSuggestMessage(type);}
}
//设置文本框失去焦点的响应事件
this.setBlurFunc=function(id,type,label){
//重复密码文本框onfocus方法
if(type==inputType.rePassword){
document.getElementById(id).onblur=function(){
var ele=validator.password;
if(ele.value==null||ele.value=="")
{
label.innerHTML="<font color='red'>在此处确认密码!</font>";
}
else
{
if(ele.value!=document.getElementById(id).value)
{
label.innerHTML="<font color='red'>两次输入的密码不一致,请重新输入!</font>";
}
else
{
label.innerHTML=validator.getRightMessage(type);
}
}
validator.setSubmit();
}
return;
}
//普通文本框onfocus方法
document.getElementById(id).onblur=function(){
if(validator.getRegex(type).test(document.getElementById(id).value))
{
label.innerHTML=validator.getRightMessage(type);
}
else
{
if(this.value==""||this.value==null)
{
label.innerHTML="<font color='red'>输入内容不能为空!</font>";
}
else
{
label.innerHTML=validator.getErrorMessage(type);
}
}
if(type==inputType.password)
{
validator.rePassword.onblur();
}
validator.setSubmit();
}
}
//对单个文本框注册
this.registor=function(id,type){
var element=document.getElementById(id);
if(!this.inputs[id])
{
this.inputs[id]=new Array();
this.inputs[id]["id"]=id;
this.inputs[id]["type"]=type;
if(type==inputType.password)this.password=element;
if(type==inputType.rePassword)this.rePassword=element;
if(type==inputType.submit)
{
this.submit=element;
}
var label=this.setShowLabel(id);
this.setFocusFunc(id,type,label);
this.setBlurFunc(id,type,label);
}
}
//对文本框数组注册
this.registorAll=function(arr){
for(var i=0;i<arr.length;i++)
{
this.registor(arr[i][0],arr[i][1]);
}
validator.setSubmit();
}
//移除对文本框注册
this.remove=function(id){
if(this.inputs[id])
{
this.inputs[id]=null;
}
}
}
使用方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleAdmin.css" rel="stylesheet" type="text/css" />
<script src="../js/IT.Framework.validator.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
添加管理员用户</h1>
<table id="InfoShow" cellspacing="0" rules="all" border="0">
<tr>
<th colspan="2">
添加用户
</th>
</tr>
<tr>
<td align="right" width="160">
教工号:
</td>
<td>
<input name="adminNum" type="text" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
管理员姓名:
</td>
<td>
<input name="adminName" type="text" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
管理员密码:
</td>
<td>
<input name="password" id="passwod" type="password" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
重复密码:
</td>
<td>
<input name="rePassword" type="password" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
所属单位:
</td>
<td>
<input name="college" type="text" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
备注:
</td>
<td>
<input name="remark" type="text" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
电话号码:
</td>
<td>
<input name="phone" type="text" class="textInput" />
</td>
</tr>
<tr>
<td align="right">
电子信箱:
</td>
<td>
<input name="email" type="text" class="textInput" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="submit" id="submit" type="submit" value="添加" class="btnSubmit" />
<input name="reset" type="reset" value="取消" class="btnSubmit" />
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
validator.registorAll([["adminNum",inputType.number],["adminName",inputType.notEmpty],["password",inputType.password],["rePassword",inputType.rePassword],
["submit",inputType.submit],["remark",inputType.notEmpty],["email",inputType.canEmptyIsEmail],["phone",inputType.phone],["college",inputType.notEmpty]]);
</script>
</form>
</body>
</html>
validator的registorAll方法接受一个二维数组,该数组元素为[控件id,控件类型]的一维数组,注册完成后当注册控件的onblur时间触发时检查输入,并显示提示信息。
如果为表单,并且注册了submit控件,哪么在表单输入有错误的情况下submit为disabled,否则允许提交。