繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
表单特效
→ 正文内容
强效、方便的表单通用检测JS 不错
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="javascript"> // 表单通用检测JS by www.it2048.com 整理/制作 H.Q.J 2007/1/10 //自定义属性解释(IE支持): //ii_chname：表示该数据的中文名称 //ii_minsize:表示允许输入的最小长度,单位字节 //ii_maxsize：表示允许输入的最大长度,单位字节 //ii_type:输入的数据类型 //ii_null：表示输入值是否允许为空。为yes时允许为空。 //ii_compare:比交是否与某项(ID)值相同 function chkRadio(o){ //判断单选 for (i=0;i<o.length;i++){ if (o[i].checked) return true; } return false; } function strlen(str){ /* 取得字符串的字节长度 */ var i; var len; len = 0; for (i=0;i<str.length;i++) { if (str.charCodeAt(i)>255) len+=2; else len++; } return len; } function isnull(str){ /* 检测字符串是否为空 */ var i; for (i=0;i<str.length;i++) { if (str.charAt(i)!=' ') return false; } return true; } function isNum(s) { /* 检测字符串是否为数字 */ var regu = "^[-+]?\d*$";//支持正负\小数 //var regu = "^([0-9]*)$"; //var regu = "^([0-9]*[.0-9])$"; // 小数测试 var re = new RegExp(regu); if (s.search(re) != -1) return true; else return false; } function isType(s,t){ /* 检测数据类型是否合法 */ var RegExpPtn; var t2=t; if (t2 != ""){ switch(s){ case "EN"://英文 RegExpPtn=/^[A-Za-z]+$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "CN"://中文 RegExpPtn=/^[\u4e00-\u9fa5]+$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "NUM"://实数 RegExpPtn=/^(\+|-)?\d+($|\.\d+$)/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "INT"://正整数 RegExpPtn=/^[1-9]d*$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "DATE"://日期yyyy-mm-dd RegExpPtn=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "EMAIL"://邮件 RegExpPtn=/\w[\w.-]+@[\w-]+(\.\w{2,})+/gi; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "CARD"://身份证,也可直接调用isCard()函数 return isCard(t2) break; case "URL"://网址 RegExpPtn=/^[a-zA-z]+\:\/\/(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "IP"://IP地址,,也可直接调用isIP()函数 return isIP(t2) break; case "ID1"://ID类型1,充许英文+数字+下划线(0~30字节) RegExpPtn=/^[a-zA-Z][a-zA-Z0-9_]{0,29}$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; case "ID2"://ID类型1,充许中文+英文+数字+下划线(0~30字节) RegExpPtn=/^[a-zA-Z][a-zA-Z0-9_][_0-9a-zA-Z\u4e00-\u9fa5]{0,29}$/; if (!RegExpPtn.test(t2) ){return false;}else{return true;} break; default : break; } }else{ return false; } } function isCard(obj){ /*功能：验证身份证号码是否有效 */ var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; var iSum = 0; var info = ""; var strIDno = obj; var idCardLength = strIDno.length; if(!/^\d{17}(\d|x)$/i.test(strIDno)&&!/^\d{15}$/i.test(strIDno)) { //alert("非法身份证号"); return false; } //在后面的运算中x相当于数字10,所以转换成a strIDno = strIDno.replace(/x$/i,"a"); if(aCity[parseInt(strIDno.substr(0,2))]==null) { //alert("非法地区"); return false; } if (idCardLength==18) { sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2)); var d = new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())) { //alert("非法生日"); return false; } for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11); if(iSum%11!=1) { //alert("非法身份证号"); return false; } } else if (idCardLength==15) { sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2)); var d = new Date(sBirthday.replace(/-/g,"/")) var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate(); if(sBirthday != dd) { //alert("非法生日"); return false; } } return true; } function isIP(obj) { var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; //IP<a href="http://www.jb51.net/list/list_6_1.htm" target="_blank"><font color=red>正则</font></a> if(re.test( obj )) { if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true; } //alert("请输入合法的计算机IP地址"); return false; } function verifyInput(input) {//检测指定自定义元素 var i; var msg=""; var error = false; var v=input.value; if((input.ii_null != undefined)&&(input.ii_null != "")&&(error==false)){ if (input.ii_null=="NO"&&isnull(v)) { //为空校验 msg +="*"+input.ii_chname+"值不能为空\n"; error = true; } } if((input.ii_type != undefined)&&(input.ii_type != "")&&(error==false)){ //检查类型 switch(input.ii_type){ case "EN": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"只能输入英文字符\n"; error = true; } break; case "CN": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"只能输入中文字符\n"; error = true; } break; case "NUM": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"值应该全为数字\n"; error = true; } break; case "INT": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"只能输入整数\n"; error = true; } break; case "DATE": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"填写错误(参考:2000-12-28)\n"; error = true; } break; case "EMAIL": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"填写错误(参考:abc@163.com)\n"; error = true; } break; case "CARD": if(isCard(v)==false){ msg +="*"+input.ii_chname+"填写错误,请检查\n"; error = true; } break; case "URL": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"填写错误(参考:http://www.xxxx.com)\n"; error = true; } break; case "IP": if(isIP(v)==false){ msg +="*"+input.ii_chname+"填写错误,请检查\n"; error = true; } break; case "ID1": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"填写错误(允许输入字母、数字和下划线)\n"; error = true; } break; case "ID2": if (isType(input.ii_type,v)==false){ msg +="*"+input.ii_chname+"填写错误(允许输入中文、字母、数字和下划线)\n"; error = true; } break; default : break; } } if((input.ii_minsize != undefined)&&(input.ii_minsize != "")&&(error==false)){ if (strlen(v)<parseInt(input.ii_minsize)) { //最小长度校验 msg +="*"+input.ii_chname+"内容太短(最少需"+input.ii_minsize+"个字节)\n"; error = true; } } if((input.ii_maxsize != undefined)&&(input.ii_maxsize != "")&&(error==false)){ if (strlen(v)>parseInt(input.ii_maxsize)) { //最大长度校验 msg +="*"+input.ii_chname+"超出最大长度("+input.ii_maxsize+"个字节)\n"; error = true; } } if((input.ii_compare != undefined)&&(error==false)){ var chv=document.getElementById(input.ii_compare).value; if ((chv != undefined)&&(chv != "")) { if(chv != v){ msg +="*"+input.ii_chname+"与"+document.getElementById(input.ii_compare).ii_chname+"内容不相符，请检查\n"; error = true; } } } if(error) alert(msg); return error; } function chkFromAll(myform) { //检测所有自定义元素 var i; for (i=0;i<myform.elements.length;i++) { if (myform.elements[i].ii_chname==undefined) continue;//跳过非自定义元素 if (verifyInput(myform.elements[i])==true)//检测当前元素 { myform.elements[i].focus(); return false; } } return true; } </script> <title>无标题文档</title> <style type="text/css"> <!-- body,td,th { font-size: 13px; color: #666666; } .STYLE1 {color: #FF0000} --> </style></head> <body> <table width="80%" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td height="100" valign="top" bgcolor="#FFFFFF">JS通用表单Input检测块(IE支持) 通过自定义每一个Input的六个新属性(可省略任意个) //自定义属性解释(IE支持): //ii_chname：表示该数据的中文名称 //ii_minsize:表示允许输入的最小长度,单位字节 //ii_maxsize：表示允许输入的最大长度,单位字节 //ii_type:限制输入的数据类型，有 EN(英文),CN(中文),NUM(实数),INT(整数),DATE(短日期),EMAIL(邮件) CARD(身份证),URL(网址),IP(IP地址),ID1(英文帐号),ID2(中英文帐号) //ii_null：表示输入值是否允许为空。为yes时允许为空。 //ii_compare:比交是否与某项(ID)值相同 然后有二种检测方式， 一是在Input里直接加入onBlur="verifyInput(this);" 事件，可即时检测提示 二是在Form中onsubmit="return chkFromAll(this);"，提交才检测 使用可以直接本页内script部份另存为Form_Common.js包含就可以用，解决绝大部份表单检测 问题，与后台编程语言无关，加快后台程序编写效率，让你我更专注于后台编写 :) 由于众所周知的原因，FF等貌似不支持自定义属性，暂无解决方法(鄙视一下)。要想兼容可以自 写chkfrom函数利用document.getElementById('ID')和JS文件内函数来检测，也会加快效率 这只是我的web程序设计增效工具(Eff.Studio)的一部份，有朋友需要的话迟点我会公开由表直接自动生成表单工具、自动建立后台(含增加、列表、编辑、删除)的Class(因工作需要，暂只做ASP版) 将大大加快设计效率~~~支持啦~(支持转载，拷贝不究，恳留作者信息)</td> </tr> </table> <span class="STYLE1">演示表单：</span> <form id="form1" name="form1" method="post" action="Demo.html" onsubmit="return chkFromAll(this);"> <table width="80%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td width="20%" height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>注册帐号：</td> <td bgcolor="#FFFFFF"><label> <input name="n1" type="text" id="n1" size="20" maxlength="16" onBlur="verifyInput(this);" ii_chname="注册帐号" ii_minsize="4" ii_maxsize="16" ii_type="ID1" ii_null="NO" /> (帐号只能由英文、数字和下划线组成,5-16个字符)</label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>登陆密码：</td> <td bgcolor="#FFFFFF"><label> <input name="n2" type="text" id="n2" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="登陆密码" ii_maxsize="50" ii_null="NO" /> </label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>重复密码：</td> <td bgcolor="#FFFFFF"><label> <input name="n3" type="text" id="n3" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="重复密码" ii_maxsize="50" ii_null="NO" ii_compare="n2" /> </label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>真实姓名：</td> <td bgcolor="#FFFFFF"><label> <input name="n4" type="text" id="n4" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="真实姓名" ii_maxsize="50" ii_type="CN" ii_null="NO" /> (只能为中文)</label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>联系邮件：</td> <td bgcolor="#FFFFFF"><label> <input name="mail" type="text" id="mail" size="20" maxlength="50" /> </label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF"><span class="STYLE1">*</span>联系QQ：</td> <td bgcolor="#FFFFFF"><label> <input name="n5" type="text" id="n5" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="联系QQ" ii_maxsize="50" ii_type="NUM" ii_null="NO" /> (只能为数字)</label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF">联系地址：</td> <td bgcolor="#FFFFFF"><label> <input name="n6" type="text" id="n6" size="30" maxlength="50"/> </label></td> </tr> <tr> <td height="25" align="right" bgcolor="#FFFFFF">自我简介：</td> <td bgcolor="#FFFFFF"><label> <textarea name="n7" cols="50" rows="8" id="n7" onBlur="verifyInput(this);" ii_chname="自我简介" ii_maxsize="200"></textarea> (最多100个字)</label></td> </tr> <tr> <td height="35" align="right" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><label> <input type="submit" name="Submit" value=" 提交 " /> <input type="reset" name="Submit2" value=" 重置 " /> </label></td> </tr> </table> </form> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
强效、方便的表单通用检测JS
不错
百度中搜索更多的关于
强效、方便的表单通用检测JS 不错
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
sina的lightbox效果。
下一篇文章：
js下拉框里超过变成省略号
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
很有趣的一段textarea
javascript下for( in )语句 获得所有styl
javascript实现上传图片前的预览（TX的面
一段实时更新的时间代码
微调数字
js批量上传界面的实现
显示、隐藏密码
一直复略了的一个问题，关于表单重复提交
javascript下拉框不被选中大类的区别方法
[IE&FireFox兼容]JS对select操作
最 近 更 新
使用透明叠加法美化文件上传界面的代码
用JavaScript实现的一个IP地址输入框
textarea的value是html文件源代码,存成ht
在textarea中屏蔽js的某个function的java
一个漂亮的下拉列表，去掉了灰色倒三角按
打造个性化的Select(可编辑)
表单的一些基本用法与技巧
判断file框选择的是否为图片
基于prototype的validation.js发布2.3.4新
常用js脚本
热 点 排 行
checkbox实现全选的多种方法 不断
收藏的js表单验证控制代码大全
HTML里select的CSS样式的改变
改进版：在select中添加、修改、
二级连动菜单
Select的OnChange()事件
javascript判断单选框或复选框是
JS多级连动菜单
多个iframe自动调整大小的问题
把textarea中字符串里含有的回车
文章评论
共有 位脚本之家网友发表了评论我来说两句