每日一得

不求多得,只求一得 about java,hibernate,spring,design,database,Ror,ruby,快速开发
最近关心的内容:SSH,seam,flex,敏捷,TDD
本站的官方站点是:颠覆软件

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  220 随笔 :: 9 文章 :: 421 评论 :: 0 Trackbacks
本程序最初是由wanghr100(灰豆宝宝.net)的checkForm基础上进行修改的,增加了很多功能,如下:
  • 对非ie的支持
  • 增加了内置表达式和内置提示
  • 增加了显示方式(弹出式和页面显示式)
  • 增加了显示一条和显示全部
  • 进行了封装(CLASS_CHECK)
  • 支持外接函数或表达式(应用在密码一致)
  • 简化了调用方式,所有操作只需要<script language='javascript' src='checkform.js'>,然后在HTML里定义各标签验证格式
  • 对IE增加了对键盘输入的限制(如:定义usage='int'时,输入框只能输入数字(非IE无效
  • 增加了对disabled的不验证
  • 自定义报警方式(重写showMessageEx方法)
 
声明: 对本程序可以任意复制传播,但请保留声明部分,对于内置的表达式有些没有做到很严格,如果你有好的建议和意见,欢迎邮件和我联系或者上我的博客留言 

简介:

    本程序只需要对需要验证的标签设置三个属性:usage,exp,tip
 
  • usage     : 内置格式或表达式或函数
  • exp        : 正则表达式(注意如果指定了usage则忽略exp)
  • tip          : 出错提示(如果是内置格式可以不要此属性,有缺省提示)
 
    调用时只需要引用<script language='javascript' src='checkform.js'></script>,然后为每个标记增加以上3个属性(不一定需要全部) ,注意本js的默认编码是gb2312,如果你的.net程序是utf-8,可以把js另存为utf-8格式的,或者该webconfig里编码为gb2312
 
演示:
下载:
基本表达式演示代码:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<HEAD>
<SCRIPT language=JavaScript src="checkform.js"></script>
<SCRIPT language=JavaScript>
function test()
{
    
return document.getElementById('password').value==document.getElementById('rpassword').value;
}

</SCRIPT>

</HEAD>
<BODY>基本表达式测试: 
<FORM name=form1 >
    test:
<INPUT name=test>不验证<BR>
    姓名:
<INPUT name=user Tip="姓名不能为空" Exp="" disabled=true>Disabled不验证<BR>

    账号:
<INPUT name=id Tip="账号不能为空" Exp="[^ ]+">不能为空<BR>
    IP:
<INPUT name=iP usage="ip4">ip<BR>
    数字
<INPUT name="nn" usage="int" tip="error">num<br>
    
<INPUT type=submit value=提交FORM1查询内容>
</form>
<form name=form2>
    数字
<INPUT name="nn" usage="int">num<br>

    密码:
<INPUT type=password id="password" name=password Tip="密码六位以上" Exp="\S{6,}">六位以上<BR>
    重复密码
<INPUT type=password id="rpassword" name=rpassword usage="test()" tip="重复密码不一致!" >重复密码<BR>
    电话:
<INPUT name=number Tip="电话号码含有非法字符" Exp="^\d+$"><BR>
    相片上传:
<INPUT type=file name=pic Tip="相片应该为JPG,BMP格式的" Exp="(.*)(\.jpg|\.bmp)$"><BR>
    出生日期:
<INPUT name=dt Tip="日期格式2004-08-10" Exp="^\d{4}\-\d{1,2}-\d{1,2}$">日期格式2004-08-10<BR>

    省份: 
<SELECT name=sel Tip="请选择所在省份" Exp="^0$"><OPTION value="" selected>请选择<OPTION value=1>福建省<OPTION value=2>湖北省</OPTION></SELECT> <BR>
    选择你喜欢的运动:
<BR>游泳<INPUT type=checkbox name=c Tip="请选择2项或以上" Exp="^0{2,}$" disabled> 篮球<INPUT type=checkbox name=c> 足球<INPUT type=checkbox name=c> 排球<INPUT type=checkbox name=c> <BR>

    你的学历: 大学
<INPUT type=radio name=r Tip="请选择一项学历" Exp="^0$"> 中学<INPUT type=radio name=r> 小学<INPUT type=radio name=r> <BR>
    个人介绍: 
<TEXTAREA name=txts Tip="个人介绍不能为空,且不少于20字" Exp="^[\s|\S]{20,}$"></TEXTAREA>20个字以上
    
<INPUT type=BUTTON value=提交FORM2查询内容 onclick="if(g_check.checkForm(this.form))alert();">
</FORM>
</BODY>
</HTML>


内置表达式演示代码:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<HEAD>
<SCRIPT language=JavaScript src="checkform.js"></script>
</HEAD>
<BODY>内置表达式测试: 
<FORM name=form1 >

    账号:
<INPUT name=id usage="notempty">不能为空<BR>
    整数:
<INPUT usage="int" >46<BR>

    正整数:
<INPUT usage="int+" >13试试能不能输入非数字<BR>
    负整数:
<INPUT usage="int-" >-45<BR>
    浮点数:
<INPUT usage="float" >56.4<BR>
    正浮点数:
<INPUT usage="float+" >1.0<BR>
    负浮点数:
<INPUT usage="float-" >-1.0<BR>

    数字:
<INPUT usage="num" >345<BR>
    正数:
<INPUT usage="num+" >+1<BR>
    负数:
<INPUT usage="num-" >-1.0<BR>    
    邮箱:
<INPUT  usage="email">ttyp@21cn.com<BR>

    颜色:
<INPUT  usage="color">#f0f0f0<BR>

    连接:
<INPUT  usage="url">http://www.cnblogs.com/ttyp<BR>

    中文:
<INPUT  usage="chinese">只能中文<BR>
    ascii:
<INPUT  usage="ascii">只能abc<BR>

    邮编:
<INPUT  usage="zipcode">200083<BR>

    手机:
<INPUT  usage="mobile">13678452345<BR>    
    IP:
<INPUT  usage="ip4">192.168.0.1<BR>
    图片:
<INPUT type=file usage="picture">c:\a.jpg<BR>
    压缩文件:
<INPUT type=file usage="rar">c:\a.rar<BR>
    日期:
<INPUT usage="date">2005-04-12<BR>

    
<INPUT type=submit value=提交查询内容>
</FORM>
</BODY>
</HTML>

单条弹出式提示:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<HEAD>
<SCRIPT language=JavaScript src="checkform.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--

//弹出式报警
g_check.alert    = true;

//单条报警
g_check.showAll = false;


function test()
{

    
try
    {
        
var aa = document.getElementById("a").value;
        
var bb = document.getElementById("b").value;
        
var cc = document.getElementById("c").value;

        
if(!isNaN(aa)&&!isNaN(bb)&&!isNaN(cc)&&aa.length>0&&bb.length>0&&cc.length>0)
        {
            
return aa*1+bb*1>cc*1;
        }
        
else
        {
            
return false;
        }

    }
catch(e){alert();return false;}
}

function submitme(f){
    
if(g_check.checkForm(f))f.submit();
}
//-->
</SCRIPT>
</HEAD>
<BODY>单条弹出式提示测试: 
<FORM name=form1 >

    a:
<INPUT id=a usage="num"><BR>
    b:
<INPUT id=b usage="num" ><BR>

    c:
<INPUT id=c usage="test()" tip="a+b>c">a+b>c<BR>
    
    
<INPUT type=button value=普通按钮提交 onclick="submitme(this.form)">
</FORM>
</BODY>
</HTML>


checkForm.js下载
posted on 2006-08-28 22:20 Alex 阅读(504) 评论(0)  编辑  收藏 所属分类: web技术

只有注册用户登录后才能发表评论。


网站导航: