<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单校验</title>
<style>
TD{font-family:"宋体", Helvetica, sans-serif; font-size:12px;}
.defStyle{background-color:#FFFFFF; border:1px solid #CCCCCC; width:120px;}
.errStyle{background-color:#F1F1F1; border:1px solid #000000}
</style>
<script language="javascript">
//=============这里是校验函数，请单独保存为JS文件============
/*
==========================================================================
版权信息：
作 者：张志辉(Jeson.Zhang)
日 期：2005.12
Email：cityvoice@hotmail.com
使用方法：
var checker=new Checker(frm);
//frm为你得form名称,如果要突出显示错误请用new Checker(frm,defstyle,errstyle)得方法
//其中defstyle为没错误时得样式，errstyle为出错时得样式
checker.checkEmpty("username","用户名不能为空");
checker.checkEqual("userpass","confpass","确认密码不符");
checker.checkEmail("email","电子邮件无效");
checker.checkRadio("gender","没有选择性别");
...
checker.execute("请校正以下错误后再提交");
return checker.result //checker.result返回true表示校验通过，否则返回校验失败
==========================================================================
*/
// JavaScript Document
function Checker(frm,defstyle,errstyle){
this.form=frm;
this.errMsg="";
if(defstyle)this.defStyle=defstyle;
if(errstyle)this.errStyle=errstyle;
this.arrErrField=new Array();
this.arrDefField=new Array();
this.result=true;
}
//禁止为空
Checker.prototype.checkEmpty=function(fldName,errMsg){
var field=this.getField(fldName);
if(isAllSpace(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//最大长度限制
Checker.prototype.checkMaxLength=function(fldName,errMsg,lngth){
var field=this.getField(fldName);
if(field.value.length>lngth){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//最小长度限制
Checker.prototype.checkMinLength=function(fldName,errMsg,lngth){
var field=this.getField(fldName);
if(field.value.length<lngth){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//判断长度是否在最大最小值之间
Checker.prototype.checkLength=function(fldName,errMsg,minLng,maxLng){
var field=this.getField(fldName);
if(field.value.length<minLng || field.value.length>maxLng){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//判断是否相等
Checker.prototype.checkEqual=function(fldName1,fldName2,errMsg){
var field1=this.getField(fldName1);
var field2=this.getField(fldName2);
if(field1.value!=field2.value){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName2);
}else{
this.push(this.arrDefField,fldName2);
}
}
//判断下拉框是否选中
Checker.prototype.checkSelected=function(fldName,errMsg,defaultvalue){
var field=this.getField(fldName);
if(field.options[field.selectedIndex].value==defaultvalue){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//判断单选框是否选中
Checker.prototype.checkRadio=function(fldName,errMsg){
var field=this.getField(fldName);
var result=true;
for(var i=0;i<field.length;i++){
if(field[i].checked){
result=false;
break;
}
}
if(result){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//判断复选框是否选中
Checker.prototype.checkCheckbox=function(fldName,errMsg){
var field=this.getField(fldName);
var result=true;
for(var i=0;i<field.length;i++){
if(field[i].checked){
result=false;
break;
}
}
if(result){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//被禁止得字符
Checker.prototype.checkForbiddenChar=function(fldName,errMsg,forbiddenChar){
var field=this.getField(fldName);
var result=false;
for(var i=0;i<forbiddenChar.length;i++){
if(field.value.indexOf(forbiddenChar.charAt(i))!=-1){
result=true;
break;
}
}
if(result){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//禁止输入中文
Checker.prototype.checkNotChinese=function(fldName,errMsg){
var field=this.getField(fldName);
if(isChineseChars(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是整数
Checker.prototype.checkInt=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isInt(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是数字
Checker.prototype.checkNumber=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isNumber(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是小数
Checker.prototype.checkDecimal=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isDecimal(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是日期
Checker.prototype.checkDate=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isDate(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//EMAIL有效性
Checker.prototype.checkEmail=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isEmail(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是字类字符，包括下划线
Checker.prototype.checkChar=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isChar(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是单词
Checker.prototype.checkWord=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isWord(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//只能是单词和数字
Checker.prototype.checkWordAndDigital=function(fldName,errMsg){
var field=this.getField(fldName);
if(!isWordAndDigital(field.value)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
//自定义正则表达式
Checker.prototype.checkCustomizeRegX=function(fldName,errMsg,RegX){
var field=this.getField(fldName);
var str=field.value;
var pattern=RegX;
if(str!="" && !testPattern(str,pattern)){
this.pushErr(errMsg)
this.push(this.arrErrField,fldName);
}else{
this.push(this.arrDefField,fldName);
}
}
Checker.prototype.push=function(obj,fldName){
var foundFlag=false;
var foundErrFlag=false;
for(var i=0;i<obj.length;i++){
if(obj[i]==fldName){
foundFlag=true;
break;
}
}
if(!foundFlag){
if(obj==this.arrDefField){
for(var i=0;i<this.arrErrField.length;i++){
if(this.arrErrField[i]==fldName){
foundErrFlag=true;
break;
}
}
}
if(!foundErrFlag)obj.push(fldName);
}
if(obj==this.arrErrField && this.arrDefField.length>0){
this.arrDefField.sort(function(a,b){return a==fldName?1:-1;});
if(this.arrDefField[this.arrDefField.length-1]==fldName)this.arrDefField.pop();
}
}
Checker.prototype.pushErr=function(errMsg){
this.errMsg+="--"+errMsg+"\n";
}
Checker.prototype.getField=function(fldName){
return eval("this.form."+fldName);
}
//返回结果
Checker.prototype.execute=function(errMsg){
if(this.errMsg!=""){
if(this.errStyle){
for(var i=0;i<this.arrErrField.length;i++){
var field=this.getField(this.arrErrField[i]);
if(field.length){
field[0].className=this.errStyle;
}else{
field.className=this.errStyle;
}
}
}
alert(errMsg+"\n"+this.errMsg);
this.result=false;
}
if(this.defStyle){
for(var i=0;i<this.arrDefField.length;i++){
var field=this.getField(this.arrDefField[i]);
if(field.length){
field[0].className="";
}else{
field.className=this.defStyle;
}
}
}
}
//是不是全是空格
function isAllSpace(str){
if (str == "")
return true;
var pattern=/^\s*$/gi;
return testPattern(str,pattern);
}
//检查是否中文字串
function isChineseChars(str)
{
if (str == "" || isAllSpace(str))
return false;
var pattern = /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0])*$/gi;
return testPattern(str,pattern);
}
//判断是不是整数,包括负数
function isInt(str){
if (str == "" || isAllSpace(str) || str=="0")
return true;
var pattern = /^(-)?[1-9]{1}\d*$/gi;
return testPattern(str,pattern);
}
//判断是不是数字
function isNumber(str){
if (str == "" || isAllSpace(str))
return true;
var pattern = /^\d*$/gi;
return testPattern(str,pattern);
}
//判断是不是小数,包括负数
function isDecimal(str){
if (str == "" || isAllSpace(str)){
return true;
}else{
if(str.indexOf("-.")!=-1 || str.indexOf("-00")!=-1 || (str.length>=2 && str.substring(0,1)=="0" && str.substring(1,2)!=".") || str.substring(str.length-1)==".")
return false;
}
var pattern = /^(-)?\d*(.)?\d*$/gi;
return testPattern(str,pattern);
}
//判断是不是日期
function isDate(str){
if (str == "" || isAllSpace(str))
return true;
var r = str.match(/^(\d{4})(-|\/)(\d{1,2})(-|\/)(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[3]-1, r[5]);
return (d.getFullYear()==r[1] && (d.getMonth()+1)==r[3] && d.getDate()==r[5]);
}
//判断是不是EMAIL
function isEmail(str){
if (str == "" || isAllSpace(str))
return true;
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/gi;
return testPattern(str,pattern);
}
//匹配任何字类字符,包括下划线
function isChar(str){
if (str == "" || isAllSpace(str))
return true;
var pattern = /^\w*$/gi;
return testPattern(str,pattern);
}
//匹配单词
function isWord(str){
if (str == "" || isAllSpace(str))
return true;
var pattern = /^[A-Za-z]*$/gi;
return testPattern(str,pattern);
}
//匹配单词和数字
function isWordAndDigital(str){
if (str == "" || isAllSpace(str))
return true;
var pattern = /^[A-Za-z0-9]*$/gi;
return testPattern(str,pattern);
}
//测试正则表达式
function testPattern(str,pattern){
if (pattern.test(str))
return true;
else
return false;
}
//=============校验函数结束============
</script>
<script language="javascript">
function checkForm(frm){
var checker=new Checker(frm,"defStyle","errStyle");
checker.checkEmpty("username","用户名不能为空");
checker.checkNotChinese("username","用户名不允许输入中文");
checker.checkForbiddenChar("username","用户名不能输入*^#","*^#");
checker.checkLength("userpass","密码6到10位之间",6,10);
checker.checkEqual("userpass","userpass2","密码不等");
checker.checkWordAndDigital("word","单词或者数字");
checker.checkEmpty("email","EMAIL不能为空");
checker.checkEmail("email","EMAIL无效");
checker.checkEmpty("birthday","生日不能为空");
checker.checkDate("birthday","生日不是日期");
checker.checkDate("birthday","生日不是日期");
checker.checkCustomizeRegX("telephone","电话无效",/^(\d{3,4}-)?[1-9]\d{6,7}$/gi);
checker.checkDecimal("wage","工资不是小数");
checker.checkSelected("city","请选择城市","请选择");
checker.checkRadio("sex","请选择性别");
checker.checkCheckbox("hobbies","请选择爱好");
checker.execute("请校正有颜色地方的数据");
return checker.result;
}
</script>
</head>
<body>
<table width="800" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<form name="form1" method="post" onSubmit="return checkForm(form1)">
用户名：<input name="username" type="text" class="defStyle">
密码：<input name="userpass" type="password" class="defStyle">
确认密码：<input name="userpass2" type="password" class="defStyle">
单词数字：<input name="word" type="text" class="defStyle">
<br>
EMAIL ：<input name="email" type="text" class="defStyle">
生日：<input name="birthday" type="text" class="defStyle">
电话号码：
<input name="telephone" type="text" class="defStyle">
工资：<input name="wage" type="text" class="defStyle"><br>
城市：<select name="city" class="defStyle">
<option value="请选择">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
性别：<input name="sex" type="radio" value="0">男<input name="sex" type="radio" value="1">女
爱好：<input name="hobbies" type="checkbox" value="打球">打球<input name="hobbies" type="checkbox" value="下棋">下棋
<input name="btnSubmit" type="submit" value="提 交">
</form>
</td></tr></table>
</body>
</html>
posted on 2006-11-17 14:28
汪杰 阅读(374)
评论(0) 编辑 收藏 引用 所属分类:
javascript