自动校验表单中的数据
在Web应用程序的输入表单中,很多东西需要被校验。比如,某一项必须填写或者某个条目必须只能是数字;只能以某个标准的格式获取数据;文字框里的省略符需要被擦除以防导致SQL错误等等。
也许你的Web应用程序只有少数几个输入表单,那么用脚本语言进行复杂的编码来完成确认工作是可行的。但是如果摆在你面前的是拥有数以百计表单的应用程序,要为每个条目都提供合法性检查,噢,真可怕。没关系,下面我将提供一个自动校验form中所有元素的代码,用它来自动进行校验工作,附件中是源码。
你所要做的工作:
包含提供的JS
在Form的元素中定义所要校验的规则
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT name=text1 Pattern="date" ElName="我的日期">
<p>
字符串:<INPUT name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="button" id=button1 name=button1 value="校验一下数据">
</form>
============================================
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<P>
<form name=MyForm >
整型数据
自动校验表单中的数据
在Web应用程序的输入表单中,很多东西需要被校验。比如,某一项必须填写或者某个条目必须只能是数字;只能以某个标准的格式获取数据;文字框里的省略符需要被擦除以防导致SQL错误等等。
也许你的Web应用程序只有少数几个输入表单,那么用脚本语言进行复杂的编码来完成确认工作是可行的。但是如果摆在你面前的是拥有数以百计表单的应用程序,要为每个条目都提供合法性检查,噢,真可怕。没关系,下面我将提供一个自动校验form中所有元素的代码,用它来自动进行校验工作,附件中是源码。
你所要做的工作:
包含提供的JS
在Form的元素中定义所要校验的规则
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT name=text1 Pattern="date" ElName="我的日期">
<p>
字符串:<INPUT name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="button" id=button1 name=button1 value="校验一下数据">
</form>
============================================
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<P>
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT name=text1 Pattern="date" ElName="我的日期" NotNull=1>
<p>
字符串:<INPUT name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="submit" id=button1 name=button1 value="校验一下数据">
</form>
</P>
<script>
/**
* 应用举例:
* <input type=text Pattern="number" ElName="test" [MaxLen=20]>
* 指定Pattern和ElName
* 目前支持的Pattern:number、float、date、string
* 其中string必须指定MaxLen的属性
* @return
*/
/**
* 应用举例:
* <input type=text Pattern="number" ElName="test" [MaxLen=20]>
* 指定Pattern和ElName
* 目前支持的Pattern:number、float、date、string
* 其中string必须指定MaxLen的属性
* @return
*/
/**
* 去掉字符串中两边的空格
* @param s 字符串
* @return 返回已经去掉两边空格的字符串
*/
function trim(s){
var iFirst = 0;
var iLast = s.length - 1;
var sTrimChars = ' \t';
while ( (iFirst < iLast) && (sTrimChars.indexOf(s.charAt(iFirst)) != -1) ) iFirst++;
while ( (iLast >= iFirst) && (sTrimChars.indexOf(s.charAt(iLast)) != -1) ) iLast--;
return s.substring(iFirst, iLast + 1);
}
/**
* 校验字符串是否为空
* @param _sCode 待校验的字符串ID
* @return 如果是,返回true,否则返回false
*/
function test_null(_sCode) {
_sCode = trim(_sCode);
var nLen = getRealLen(_sCode);
if(nLen==0)return false;
return true;
}
/**
* 校验字符串是否小于指定的长度
* @param _sCode 待校验的字符串ID
* @param _nLen 指定的最大长度
* @return 如果是,返回true,否则返回false
*/
function test_string_len(_sCode, _nLen) {
if(isNaN(_nLen))return true;
_sCode = trim(_sCode);
var nLen = getRealLen(_sCode);
if(nLen==0)return true;
if(nLen>parseInt(_nLen))return false;
else return true;
}
/**
* 校验字符串是否为特定长度的整数
* @param _sCode 待校验的字符串ID
* @return 如果是,返回true,否则返回false
*/
function test_number_len(_sCode, _nLen) {
_sCode = trim(_sCode);
var nLen = _sCode.length;
if(nLen==0)return true;
//var myReg = new RegExp("^[1-9][0-9]{"+(nLen-1)+"}");
var myReg = new RegExp("^[1-9][0-9]{"+(_nLen-1)+"}$");
if(myReg.test(_sCode)) return true;
return false;
}
/**
* 校验字符串是否为20位的整数
* @param _sCode 待校验的字符串ID
* @return 如果是,返回true,否则返回false
*/
function test_number(_sCode) {
_sCode = trim(_sCode);
var nLen = _sCode.length;
if(nLen==0)return true;
//var myReg = new RegExp("^[1-9][0-9]{"+(nLen-1)+"}");
var myReg = new RegExp("^[1-9][0-9]{0,19}$");
if(myReg.test(_sCode)) return true;
return false;
}
/**
* 校验字符串是否为浮点数
* @param _sCode 待校验的字符串ID
* @return 如果是,返回true,否则返回false
*/
function test_float(_sCode) {
_sCode = trim(_sCode);
var nLen = _sCode.length;
if(nLen==0)return true;
var nLen = _sCode.length;
//查找整数的长度
var nPose = _sCode.indexOf(".");
var myReg ;
if(nPose<1)return test_number(_sCode);
if(nPose==1){
myReg = new RegExp("^[0-9]\.[0-9]{"+(nLen-nPose-1)+"}");
}else{
myReg = new RegExp("^[1-9][0-9]{"+(nPose-1)+"}\.[0-9]{"+(nLen-nPose-1)+"}");
}
if(myReg.test(_sCode)) return true;
return false;
}
/**效验是否是瑞年**/
function isLeapYear(year){
if((year%4==0&&year%100!=0)||(year%400==0)){
return true;
}
return false;
}
/**
* 校验字符串是否为指定格式的日期
* @param _sCode 待校验的字符串ID
* @return 如果是,返回true,否则返回false
*/
function test_date(object, format){
object = trim(object);
var nLen = object.length;
if(nLen==0)return true;
var regexp,value,index, sDesc;
var year,month,day;
var iyear,imonth,iday;
var fmt,regfmt,ordfmt,fmtDesc;
var dateArray;
if(object==null)return false;
if(format==null)return false;
value = object;
fmt=new Array("yyyy/mm/dd",
"mm/dd/yyyy",
"dd/mm/yyyy",
"yyyy-mm-dd",
"mm-dd-yyyy",
"dd-mm-yyyy");
fmtDesc=new Array("年/月/日(例如:2002/12/24)",
"月/日/年(例如:12/24/2002)",
"日/月/年(例如:24/12/2002)",
"年-月-日(例如:2002-12-24)",
"月-日-年(例如:12-24-2002)",
"日-月-年(例如:24-12-2002)");
regfmt=new Array("^([0-9]{4})\/([0-9]{2})\/([0-9]{2})$",
"^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$",
"^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$",
"^([0-9]{4})\-([0-9]{2})\-([0-9]{2})$",
"^([0-9]{2})\-([0-9]{2})\-([0-9]{4})$",
"^([0-9]{2})\-([0-9]{2})\-([0-9]{4})$");
ordfmt=new Array("123","312","321", "123","312","321");
format=format.toLowerCase();
for(index=0;index<fmt.length;index++){
if(format==fmt[index]){
regexp = new RegExp(regfmt[index]);
sDesc = fmtDesc[index];
iyear=parseInt(ordfmt[index].charAt(0));
imonth=parseInt(ordfmt[index].charAt(1));
iday=parseInt(ordfmt[index].charAt(2));
break;
}
}
if(index==fmt.length){
alert("Date Format Not Supported!");
return false;
}
if(regexp.test(value)){
dateArray=value.match(regexp);
year=dateArray[iyear];
month=dateArray[imonth];
day=dateArray[iday];
//alert("The Date you have filled is:\nYear:"+year+"\nMonth:"+month+"\nDay:"+day);
if(year<1949){
alert("[年]必须大于1949!");
return false;
}
if(month<0||month>12){
alert("[月]必须在1-12之间!");
return false;
}//end month
if(day<0||day>31){
alert("[天]必须在1-31之间!");
return false;
}else{
if(month==2){
if(isLeapYear(year)&&day>29){
alert("瑞年的二月必须在1-29之间!");
return false;
}
if(!isLeapYear(year)&&day>28){
alert("二月必须在1-28之间!");
return false;
}
}//end 2 month
if((month==4||month==6||month==9||month==11)&&(day>30)){
alert("当前的月份必须在1-30之间!");
return false;
}//end 30days
}//end day
}else{
alert("日期的格式不正确!\n正确的日期格式:"+sDesc);
return false;
}//end formate
return true;
}
/** 获取字符串的长度(一个中文相当于2个英文) **/
function getRealLen( str) {
var totallength=0;
for (var i=0; i < str.length;i++){
var intCode=str.charCodeAt(i);
if (intCode>=0&&intCode<=128) {
totallength=totallength+1; //非中文单个字符长度加 1
}else {
totallength=totallength+2; //中文字符长度则加 2
}
} //end for
return totallength;
} //英文字符和中文字符长度的比较
function ValidForm(){
//暂时封掉接口
//return true;
var thisForm = window.event.srcElement;
if(thisForm==null)return false;
var arEls = thisForm.elements;//表单中所有数据
var bValid = false;//记录是否通过效验
var sMsg = ""; //记录提示信息
for(var i = 0;i<arEls.length;i++){
if(arEls[i].NotNull){
if(!test_null(arEls[i].value)){
sMsg += (sMsg.length>1?"\n":"")+"【"+arEls[i].ElName+"】必须填写!\n";
bValid = true;
continue;
}
}
if(!arEls[i].Pattern)continue;
switch(arEls[i].Pattern.toLowerCase()){
case "number":
if(arEls[i].NumLen){
if(!test_number_len(arEls[i].value, arEls[i].NumLen)){
sMsg += (sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
bValid = true;
}
}else{
if(!test_number(arEls[i].value)){
sMsg += (sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
+"【"+arEls[i].value+"]不是整数!";
bValid = true;
}
}
break;
case "float":
if(!test_float(arEls[i].value)){
sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
+"【"+arEls[i].value+"]不是浮点数!";
bValid = true;
}
break;
case "string":
if(arEls[i].MaxLen){
if(!test_string_len(arEls[i].value, arEls[i].MaxLen)){
sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
+"长度超出了最大范围:"+arEls[i].MaxLen+"个字符!";
bValid = true;
}
}
break;
case "date":
if(!test_date(arEls[i].value, "yyyy-mm-dd")){
sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
+"【"+arEls[i].value+"]不符合正常的日期格式[2003-12-24]!";
bValid = true;
}
break;
default:
break;
}
/*if(!test.IsValid(arEls[i].value, arEls[i].Pattern)){
sMsg +=(sMsg.length>1?"\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!";
bValid = true;
}*/
}
if(bValid)alert(sMsg);
return !bValid;
}
if(document.forms.length>0)document.forms[0].onsubmit = ValidForm;
</script>
</BODY>
</HTML>
你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=167365