Javascript 笔记

JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现。 //检查电话号码 function isTel(str){        var reg=/^([0-9]|[\-])+$/g ;        if(str.length<7 || str.length>18){         return false;        }        else{          return reg.exec(str);        } }

JavaScript表单验证email,判断一个输入量是否为邮箱email,通过正则表达式实现。 //检查email邮箱 function isEmail(str){        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;        return reg.test(str); }

JavaScript表单验证中文大写字母,判断一个输入量是否为中文或大写的英文字母,通过正则表达式实现。 // 检查是否为有效的真实姓名,只能含有中文或大写的英文字母 function isValidTrueName(strName){       var str = Trim(strName);   //判断是否为全英文大写或全中文,可以包含空格       var reg = /^[A-Z u4E00-u9FA5]+$/;       if(reg.test(str)){        return false;       }       return true; }

JavaScript表单验证是否为中文,判断一个输入量是否为中文,通过正则表达式实现。 // 检查是否为中文 function isChn(str){       var reg = /^[u4E00-u9FA5]+$/;       if(!reg.test(str)){        return false;       }       return true; }

JavaScript正则比较两个字符串, 就是利用正则表达式快速比较两个字符串的不同字符。 <script language="JavaScript"> var str1 = "求一个比较字符串处理功能"; var str2 = "求两或三个比较字符串处理"; var re = new RegExp("(?=.*?)[^" + str1 +"](?=.*?)|(?=.*?)[^" + str2 + "](?=.*?)", "g"); var arr; while ((arr = re.exec(str1 + str2)) != null) {    document.write(arr); } </script>

JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。 //检查年龄 function isAge(str){        var mydate=new Date;        var now=mydate.getFullYear();        if (str < now-60 || str > now-18){         return false;        }        return true; }

JavaScript表单验证密码是检查输入框是否为有效的密码, 密码只允许由ascii组成, 此函数只在修改或注册密码时使用。 也就是说一切不是ascii组成的字符串都不能通过验证。 具体函数checkValidPasswd请看下面的演示代码

function checkValidPasswd(str){       var reg = /^[x00-x7f]+$/;       if (! reg.test(str)){        return false;       }       if (str.length < 6 || str.length > 16){        return false;       }       return true; }

JavaScript正则验证检查输入对象的值是否符合整数格式 输入量是str 输入的字符串 如果输入量字符串str通过验证返回true,否则返回false

function isInteger( str ){ var regu = /^[-]{0,1}[0-9]{1,}$/; return regu.test(str); }

JavaScript正则验证字符串是否为空 用途:检查输入字符串是否为空或者全部都是空格 输入量是一个字符串:str 返回:如果输入量全是空返回true,否则返回false

function isNull( str ){ if ( str == "" ) return true; var regu = "^[ ]+$"; var re = new RegExp(regu); return re.test(str); }

通过正则去判断获得是是否是IP地址的格式,然后返回相应的结果

JavaScript正则验证IP,用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果JavaScript通过验证IP返回true,否则返回false; JavaScript验证IP代码如下

function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true; } return false; }

通过正则去判断获得是是否是IP地址的格式,然后返回相应的结果

JavaScript屏蔽关键字,大概的思路就是去用javascript去替换已有的文本,达到替换的目的<script language="javascript1.2"> function test() { if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){ alert(":)"); a.b.focus(); return false;} } </script> <form name=a onsubmit="return test()"> <input type=text name=b> <input type="submit" name="Submit" value="check"> </form>

JavaScript验证两次输入密码是否相同, 通过去判断两次输入的密码是否相同来实现, 下面是html代码

<FORM METHOD=POST ACTION=""> <input type="password" id="input1"> <input type="password" id="input2"> <input type="button" value="test" onclick="check()"> </FORM>

下面是javascript的代码

<script> function check() { with(document.all){ if(input1.value!=input2.value) { alert("false") input1.value = ""; input2.value = ""; } else document.forms[0].submit(); } } </script>

07年9月22日更新,下面的验证两次输入密码,是否相同也同样可以使用,记录下

<script>      function   f1()      {      if(document.theform.pswc.value!=document.theform.psw.value   )      {      //alert(document.theform.pswc.value);      document.theform.pswc.focus();            return   false;      }      else      {        return   true;      }      }      </script>      <form   name="theform">      <input   type="text"   id="pswc"   name="pswc">      <input   type="text"   id=psw   name="psw">      <input   type="button"   onclick=alert(f1())>      </form>

再加一个验证两次输入密码是否相同的JavaScript代码

<script language="javascript"> <!-- function CheckForm() if (document.form.PWD.value != document.form.PWD_Again.value) {    alert("您两次输入的密码不一样!请重新输入.");    document.ADDUser.PWD.focus();    return false; }    return true; } --> </script>

JavaScript屏蔽鼠标右键还可以在body标签里加上oncontextmenu= self.event.returnvalue=false 或者:

<script language="javascript"> function document.oncontextmenu() { return false; } </script> function nocontextmenu(){ if(document.all) { event.cancelBubble=true; event.returnvalue=false; return false; }}

或者:

<body onmousedown="rclick()" oncontextmenu= "nocontextmenu()"> <script language="javascript"> function rclick(){ if(document.all) { if (event.button == 2){ event.returnvalue=false; }}} </script>

另外

  • oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table>

可用于Table

  • <body onselectstart="return false"> 取消选取、防止复制
  • oncopy="return false;" oncut="return false;" 防止复制

屏蔽鼠标右键、Ctrl+N、Shift+F10、F5刷新、退格键 function window.onhelp(){return false} //屏蔽F1帮助 function KeyDown(){ if ((window.event.altKey)&& ((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ← (window.event.keyCode==39))){ //屏蔽 Alt+ 方向键 → alert("不准你使用ALT+方向键前进或后退网页!"); event.returnvalue=false; } 注:这还不是真正地屏蔽 Alt+ 方向键,因为 Alt+ 方向键弹出警告框时,按住 Alt 键不放,用鼠标点掉警告框,这种屏蔽方法就失效了。 if ((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password") || //屏蔽退格删除键 (event.keyCode==116)|| //屏蔽 F5 刷新键 (event.ctrlKey && event.keyCode==82)){ //Ctrl + R event.keyCode=0; event.returnvalue=false; } if ((event.ctrlKey)&&(event.keyCode==78)) //屏蔽 Ctrl+n event.returnvalue=false; if ((event.shiftKey)&&(event.keyCode==121)) //屏蔽 shift+F10 event.returnvalue=false; if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnvalue = false; //屏蔽 shift 加鼠标左键新开一网页 if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4 window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); return false;} }

实现屏蔽键盘所有键的javascript代码如下:

<script language="javascript"> <!-- function document.onkeydown(){    event.keyCode = 0;    event.returnvalue = false; } --> </script>

屏蔽浏览器右上角“最小化”“最大化”“关闭”键

<script language=javascript> function window.onbeforeunload() {   if(event.clientX>document.body. clientWidth&&event.clientY<0||event.altKey)   {     window.event.returnvalue = "";   } } </script>

或者使用全屏打开页面

<script language="javascript"> <!-- window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"); --> </script>

注:在body标签里加上onbeforeunload="javascript:return false"(使不能关闭窗口)

JavaScript屏蔽F5键 代码如下 <script language="javascript"> <!-- function document.onkeydown()   {       if ( event.keyCode==116)       {           event.keyCode = 0;           event.cancelBubble = true;           return false;       } } --> </script>

JavaScript屏蔽IE后退按钮 在你链接的时候用

<a href="javascript: location.replace(url)">

JavaScript屏蔽主窗口滚动条 在body标签里加上

style="overflow-y:hidden"

JavaScript屏蔽拷屏,不断地清空剪贴板 在body标签里加上

onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)"

JavaScript屏蔽网站的打印功能

<style> @media print {    * { display: none } } </style>

JavaScript屏蔽IE6.0 图片上自动出现的保存图标 方法一:

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

方法二:

<img galleryimg="no">

JavaScript屏蔽页中所有的script

<noscrript></noscript>

JavaScript验证表单项不能为空,这个可是很常用的哦,比如在验证表单里面的用户名不能为空等等,代码如下<s cript  language="javascript"> <!-- function  CheckForm() {   if  (document.form.name.value.length  ==  0)  {   alert("请输入您姓名!"); document.form.name.focus(); return  false; } return  true; } --> </script>

JavaScript表单验证自定义内容,这个比较好,可以自由定制输入项的内容来用JavaScript进行验证,下面demo中是表单项只能为数字和"_",同样您可以进行扩展来达到您想要的目的。用于电话/银行帐号验证上,可扩展到域名注册等 <script  language="javascript"> <!-- function  isNumber(String) {   var  Letters  =  "1234567890-";  //可以自己增加可输入值 var  i; var  c; if(String.charAt(  0  )=='-') return  false; if(  String.charAt(  String.length  -  1  )  ==  '-'  ) return  false; for(  i  =  0;  i  <  String.length;  i  ++  ) {   c  =  String.charAt(  i  ); if  (Letters.indexOf(  c  )  <  0) return  false; } return  true; } function  CheckForm() {   if(!  isNumber(document.form.TEL.value))  {   alert("您的电话号码不合法!"); document.form.TEL.focus(); return  false; } return  true; } --> </script>

第一种:javascript验证邮箱格式 <SCRIPT LANGUAGE=javascript RUNAT=Server> function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) return true; else alert("oh"); } </SCRIPT> <input type=text onblur=isEmail(this.value)> 第二种:用Javascript验证email填写是否正确 <html> <head> <title>test</title> <script language="javascript"> function emailCheck () { var emailStr=document.all.form1.tel.value; alert(emailStr); var emailPat=/^(.+)@(.+)$/; var matchArray=emailStr.match(emailPat); if (matchArray==null) { alert("电子邮件地址必须包括 ( @ 和 . )") return false; } return true; } </script> </head> <body> <form name="form1"> <input type="text" name="tel"/> <input type="button" value="press" onclick="emailCheck()"/> </form> </span> </body> </html> 第三种: js验证Email function char_test(chr) //字符检测函数 { var i; var smallch="abcdefghijklmnopqrstuvwxyz"; var bigch="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; for(i=0;i<26;i++) if(chr==smallch.charAt(i) || chr==bigch.charAt(i))   return(1); return(0); } function spchar_test(chr) //数字和特殊字符检测函数 { var i; var spch="_-.0123456789"; for (i=0;i<13;i++)   if(chr==spch.charAt(i))   return(1); return(0); } function email_test(str) { var i,flag=0; var at_symbol=0; //“@”检测的位置 var dot_symbol=0; //“.”检测的位置 if(char_test(str.charAt(0))==0 ) return (1); //首字符必须用字母 for (i=1;i<str.length;i++) if(str.charAt(i)=='@')   {   at_symbol=i;   break;   } //检测“@”的位置 if(at_symbol==str.length-1 || at_symbol==0) return(2); //没有邮件服务器域名 if(at_symbol<3) return(3); //帐号少于三个字符 if(at_symbol>19 ) return(4); //帐号多于十九个字符 for(i=1;i<at_symbol;i++) if(char_test(str.charAt(i))==0 && spchar_test(str.charAt(i))==0)   return (5); for(i=at_symbol+1;i<str.length;i++) if(char_test(str.charAt(i))==0 && spchar_test(str.charAt(i))==0)   return (5); //不能用其它的特殊字符    for(i=at_symbol+1;i<str.length;i++) if(str.charAt(i)=='.') dot_symbol=i; for(i=at_symbol+1;i<str.length;i++) if(dot_symbol==0 || dot_symbol==str.length-1) //简单的检测有没有“.”,以确定服务器名是否合法 return (6); return (0); //邮件名合法 }

JavaScript验证只能是英文字符和数字

<input onkeyup="value="/oblog/value.replace(/[\W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 问题 代码如下: 现在无论输入什么字符它都提示,为什么??高手指点!谢谢 <script language=javascript> function ck() { str=form1.xuliehao.value; str_len =str.length; if (str_len!= 27) { alert("请输入英文大写字母a-z和1-9数字。如:dbdg43-byeiy2-mal3k5-re34y1"); return false; } for(i=0;i<=str.length;i++) { ch = str.charcodeat(i); if(!(ch>=65 && ch<=90) || !(ch>=49 && ch<=57)|| !(ch==45)) { alert("请输入英文大写字母a-z和1-9数字。如:dbdg43-byeiy2-mal3k5-re34y1"); return false; } } return true; } </script> 代码如下: 现在无论输入什么字符它都提示,为什么??高手指点!谢谢 <script language=javascript> function ck() { str=form1.xuliehao.value; str_len =str.length; if (str_len!= 27) { alert("请输入英文大写字母a-z和1-9数字。如:dbdg43-byeiy2-mal3k5-re34y1"); return false; } for(i=0;i<=str.length;i++) { ch = str.charcodeat(i); if(!(ch>=65 && ch<=90) || !(ch>=49 && ch<=57)|| !(ch==45)) { alert("请输入英文大写字母a-z和1-9数字。如:dbdg43-byeiy2-mal3k5-re34y1"); return false; } } return true; } </script> 响应者 1:不能用正则吗? 响应者 2:<script language="javascript"> function testcontain(inputstr){ var reg1=/*/g; var reg2=/*/g; var reg3=/\-*/g; inputstr=inputstr.replace(reg1,""); inputstr=inputstr.replace(reg2,""); inputstr=inputstr.replace(reg3,""); if (inputstr.length>0) alert("出现以下不允许输入的内容:\n"+inputstr) } </script> <input type=text value="1w@a" name="txt1"> <input type=button onclick="testcontain(txt1.value)" value="测试"> 响应者 3:<script language=javascript> function check() { if(document.form1.user_name.value=="") { alert("请输入真实姓名!"); document.form1.user_name.focus(); return false; } 在这写楼上的判断程序,怎么改写呢? <form name="form1" method="post" onsubmit="return check();" action="user_add.asp"> } </script> 这样我点保存按钮时同时判断用户名和序列号

上一篇《javascript验证是数字》不能验证是否有小数点这样的数字,现在更新了下可以验证带小数点的小数,原理还是一样,通过event.keycode来限制用户的输入,不过在客户端限制JS运行的情况下可就没效果了哦 <script language="javascript"> function check(obj){ if(event.keyCode == 13 || event.keyCode == 46) return true; if(event.keyCode < 48 || event.keyCode >57) return false; else return true; } </script> <input type="text" name="textfield" onkeypress="javascript:return check(this);" />

javascript限制输入的只能是数字,判断event.keyCode的值,并将它限定只能为数字,如果不是数字,则返回错误,如果是数字,则继续。 我先介绍验证javascript是否是数字另一种方式,通过下面的函数来实现:

function isNumber(oNum)    {   if(!oNum) return false;   var strP=/^\d+(\.\d+)?$/;   if(!strP.test(oNum)) return false;   try{   if(parseFloat(oNum)!=oNum) return false;   }   catch(ex)   {    return false;   }   return true;    }

这段javascript代码很简洁,大家可以看下。

<script language=javascript> function onlyNum() { if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105))) //考虑小键盘上的数字键 event.returnvalue=false; } </script> <input onkeydown="onlyNum();">

下面还有一种比较笨的方法,大家也可以看下,学习嘛 下次贴个用正则验证数字的

<script language="javascript"> function CheckMyForm() { var txt = myform.mytext.value; if(checknumber(txt)) { alert("只允许输入数字!"); return false; } return true; } function checknumber(String) { var Letters = "1234567890"; var i; var c; for( i = 0; i < String.length; i ++ ) { c = String.charAt( i ); if (Letters.indexOf( c ) ==-1) { return true; } } return false; } </script> <body> <form name="myform" onSubmit="return CheckMyForm()"> <input type="text" name="mytext"> <input type="submit" name="mysubmit"> </form> </body>

最简单的javascript验证是否不是数字的代码如下:

<input type='TEXT' onKeyPress="if(event.keyCode==13){if(isNaN(this.value))alert('不是数值')};">

只能是英文,好简单吧,用的就是正则,javascript验证英文的正则表达式 <script language=javascript> function onlyEng() { if(!(event.keyCode>=65&&event.keyCode<=90)) event.returnvalue=false; } </script>

只能是汉字,好简单吧,用的就是正则,javascript验证中文的正则表达式 <input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')"> 07年9月19日补: 加了一个验证中文的函数 如下: function isChn(str){       var reg = /^[u4E00-u9FA5]+$/;       if(!reg.test(str)){        return false;       }       return true; } 需要用的时候直接调用这个函数就可以了,同样也是使用javascript的正则表达式来验证验证中文的

长度限制

<script> function test() { if(document.a. b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } </script> <form name=a onsubmit="return test()"> <textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea> <input type="submit" name="Submit" value="check"> </form>

上篇文章《JavaScript验证正则表达式大全》说的是javascript中使用的正则表达式的例子,但是没有说这些正则表达式如何使用,现在给大家几个例子,大家可以看看。 利用正则表达式判断是否是0-9的阿拉伯数字

function regIsDigit(fData) {     var reg = new RegExp("^[0-9]$");     return (reg.test(fData)); }

利用这则表达式获取字符串的长度

function regDataLength(fData) {     var valLength = fData.length;     var reg = new RegExp("^[\u0391-\uFFE5]$");     var result = 0;     for(i=0; i< valLength; i++)     {         if(reg.test(fData.charAt(i)))         {             result += 2;         }         else         {             result ++;         }     }     return result; }

应用扩展判断是否是数值

function regIsNumber(fData) {     var reg = new RegExp("^[-]?[0-9]+[\.]?[0-9]+$");     return reg.test(fData) }

验证Email是否正确

    function regIsEmail(fData)     {         var reg = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");         return reg.test(fData);     }

判断手机号是否正确

    function regIsPhone(fData)     {         var reg = /^(\+86)?(1[0-9]{10})$/;         return reg.test(fData);     }

JavaScript验证正则表达式大全,搜集最全的JavaScript验证正则表达式,开始查看吧,这里的都是正则表达式的例子,具体和函数结合的使用方法,还请查看下篇文章《JavaScript使用正则表达式进行验证》 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?|< .*? /> 评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力 匹配首尾空白字符的正则表达式:^s*|s*$ 评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式 匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 评注:表单验证时很实用 匹配网址URL的正则表达式:[a-zA-z]+://[^s]* 评注:网上流传的版本功能很有限,上面这个基本可以满足需求 匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注:表单验证时很实用 匹配国内电话号码:d{3}-d{8}|d{4}-d{7} 评注:匹配形式如 0511-4405222 或 021-87888822 匹配腾讯QQ号:[1-9][0-9]{4,} 评注:腾讯QQ号从10000开始 匹配中国邮政编码:[1-9]d{5}(?!d) 评注:中国邮政编码为6位数字 匹配身份证:d{15}|d{18} 评注:中国的身份证为15位或18位 匹配ip地址:d+.d+.d+.d+ 评注:提取ip地址时有用 匹配特定数字: ^[1-9]d*$    //匹配正整数 ^-[1-9]d*$   //匹配负整数 ^-?[1-9]d*$   //匹配整数 ^[1-9]d*|0$  //匹配非负整数(正整数 + 0) ^-[1-9]d*|0$   //匹配非正整数(负整数 + 0) ^[1-9]d*.d*|0.d*[1-9]d*$   //匹配正浮点数 ^-([1-9]d*.d*|0.d*[1-9]d*)$  //匹配负浮点数 ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$  //匹配浮点数 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$   //匹配非负浮点数(正浮点数 + 0) ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$  //匹配非正浮点数(负浮点数 + 0) 评注:处理大量数据时有用,具体应用时注意修正 匹配特定字符串: ^[A-Za-z]+$  //匹配由26个英文字母组成的字符串 ^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串 ^[a-z]+$  //匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串 ^w+$  //匹配由数字、26个英文字母或者下划线组成的字符串 在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下: 只能输入数字:“^[0-9]*$” 只能输入n位的数字:“^d{n}$” 只能输入至少n位数字:“^d{n,}$” 只能输入m-n位的数字:“^d{m,n}$” 只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$” 只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$” 只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$” 只能输入非零的正整数:“^+?[1-9][0-9]*$” 只能输入非零的负整数:“^-[1-9][0-9]*$” 只能输入长度为3的字符:“^.{3}$” 只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$” 只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$” 只能输入由26个小写英文字母组成的字符串:“^[a-z]+$” 只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$” 只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$” 验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间, 只能包含字符、数字和下划线。 验证是否含有^%&',;=?$"等字符:“[^%&',;=?$x22]+” 只能输入汉字:“^[u4e00-u9fa5],{0,}$” 验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$” 验证InternetURL:“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$” 验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$” 正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”, “XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。 验证身份证号(15位或18位数字):“^d{15}|d{}18$” 验证一年的12个月:“^(0?[1-9]|1[0-2])$”正确格式为:“01”-“09”和“1”“12” 验证一个月的31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$” 正确格式为:“01”“09”和“1”“31”。 匹配中文字符的正则表达式: [u4e00-u9fa5] 匹配双字节字符(包括汉字在内):[^x00-xff] 匹配空行的正则表达式:n[s| ]*r 匹配HTML标记的正则表达式:/< (.*)>.*|< (.*) />/ 匹配首尾空格的正则表达式:(^s*)|(s*$) 匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 匹配网址URL的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)? (1)应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;} (2)应用:javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现 String.prototype.trim = function() { return this.replace(/(^s*)|(s*$)/g, ""); } (3)应用:利用正则表达式分解和转换IP地址 function IP2V(ip) //IP地址转换成对应数值 { re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else { throw new Error("Not a valid IP address!") } } (4)应用:从URL地址中提取文件名的javascript程序 s="http://www.9499.net/page1.htm"; s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm (5)应用:利用正则表达式限制网页表单里的文本框输入内容 用正则表达式限制只能输入中文:onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))" 用正则表达式限制只能输入全角字符: onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))" 用正则表达式限制只能输入数字:onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))" 用正则表达式限制只能输入数字和英文:onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''

这是在blueidea看到的一个写比较简洁的js表单验证程序。 总的来说该有的功能都有了,而且代码也不是很多,适合大家的小项目拿去使用 功能简述: 验证:http地址 时间日期 e-mail 数字 字符长度检查 一项输入与另一项输入比较(例如:密码的确认输入) 大小比较(只能有一个比较符号) 特点: 扩展容易,可以方便的添加自己需要的验证方式 兼容性好(ie5,6 firefox,oprea) 可用性好,没有使用alert()来弹出提示 编写思路: 整个程序的结构及较简单,为了能够验证一些常用的格式,先对js的内置对象进行了扩展。比如:

String.prototype.isUrl = function(){        var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;        var tmpStr = this;        return url.test(tmpStr); }

这个用来验证http地址。 然后写了一个对象叫做vform 包含了主要的功能,vform初始化的时候,会检查添加好的验证规则,并将要验证的表单控件对象扩展,添加validate() 和 validlength()两个函数,并且添加onblur事件来进行验证。 出错提示采用的建立div对象的方法,出错就显示,正确就隐藏。所以还需要给div定义一个样式。 使用前需要指定表单的id 注意是id不是name 要不然会出错,而规则添加的时候要指定的是表单控件的name属性不是id 验证规则参数: obj — 表单控件name minLength — 填写的字符串最小长度0意味着可以不填 而1意味着是必添 dataType — 验证格式 有 e-mail url date number any 还有两种动态的格式用\开头, \表单控件的name 表示必须与之的值一样; \>数字 表示大于数字,类推;但是没有\>=这样的 maxLength — 最大长度。 与其他程序不一样的是:我对http地址与日期格式地址的处理不同,填入的地址没有http://我会添加上后验证,这样比较人性化,符合可用性的要求。日期的处理也是一样,先尽可能的对填写的数字进行格式转化,然后再验证。格式采用了yyyy-mm-dd的格式。

代码:

<!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" />

<title>vForm表单验证程序</title>

<style type="text/css">

<!--

div.info {

         width: 170px;

         overflow:visible;

         height:auto;

         font-size: small;

         position: absolute;

         background-color: #FFffdd;

         border: 1px solid #000;

         filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);

         top: 375px;

         padding: 5px;

         left: 671px;

}

div.info_title

.err{

         padding: 5px;

         height: 50px;

         width: 24em;

         position: absolute;

         background-color: #FFFFCC;

         left: 196px;

         top: 114px;

         font-size: small;

         opacity:0.5;

         border: 1px double #333333;

         filter: Shadow(Color=#000000, Direction=135);

         filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=5);

}

#form1 .text_input {

         border-top: 1px solid #333333;

         border-right: 1px solid #999999;

         border-bottom: 1px solid #ddd;

         border-left: 1px solid #000000;

}

.info_title {

         color: #FF0000;

         background: #ACB9D1;

}

#form1 {

         position: static;

         left: 581px;

         top: 463px;

         border: 1px solid #3300FF;

         padding: 5px;

         ;

}

#imok {

         display: block;

         position: absolute;

         height:315px;

         overflow:scroll;

         left: 100px;

         top: 100px;

         width: 306px;

}

.title h1 {

         background: #33CCFF;

         border-bottom: medium solid #3366FF;

}

.title p {

         font-size: medium;

         text-indent: 2em;

}

body {

         font-family: Verdana, Arial, Helvetica, sans-serif;

         font-size: medium;

}

code {

         font: 12px/18px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;

         border:1px solid #0099cc;

         padding:5px;

         margin: 5px;

         width: 80%;

         color: #000;

         background-color: #ddedfb;

         display: block;

}

-->

</style>

<script language="JavaScript" type="text/javascript">

//程序基本思路:通过扩展对象来实现,将String扩展 将默认的表单元素扩展 定义两个自定义对象。

//String.isEmail

//String.isUrl

//表单元素.required

//表单元素.isvalid

//表单元素.validate

//

//字符串验证扩展

//├电子邮件验证

String.prototype.isEmail = function(){

         var tmpStr = this;

         var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

         return email.test(tmpStr)

}

//├http地址验证

String.prototype.isUrl = function(){

         var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;

         var tmpStr = this;

         return url.test(tmpStr);

}

//├日期验证(第一部分)

String.prototype.isDateTime = function(){

         if(Date.parse(this)||Date.parseDate(this))

         {

                   return true;

         }

         else

         {

                   return false;

         }

}

String.prototype.isInteger = function()

{

         var _i = /^[-\+]?\d+$/;

         var _s = this;

         return _i.test(_s);

}

Date.prototype.toIsoDate = function()

{

         var _d = this;

         var _s;

         _Y =_d.getFullYear();

         _M = _d.getMonth() + 1;

         _D = _d.getDate();

         _H = _d.getHours();

         _I = _d.getMinutes();

         _S = _d.getSeconds();

         with(_d)

         {

                   _s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()];

         }

         for(var i = 0; i < _s.length; i++)

         {

                   if (_s[i].toString().length == 1)_s[i]= '0'+_s[i];

         }

                   return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4])

}

//├日期验证(第二部分)

Date.parseDate = function(str, fmt) {

         fmt = fmt||"%Y-%m-%d %H:%M";

         var today = new Date();

         var y = 0;

         var m = -1;

         var d = 0;

         var a = str.split(/\W+/);

         var b = fmt.match(/%./g);

         var i = 0, j = 0;

         var hr = 0;

         var min = 0;

         for (i = 0; i < a.length; ++i) {

                   if (!a[i])

                            continue;

                   switch (b[i]) {

                       case "%d":

                       case "%e":

                            d = parseInt(a[i], 10);

                            break;

                       case "%m":

                            m = parseInt(a[i], 10) - 1;

                            break;

                       case "%Y":

                       case "%y":

                            y = parseInt(a[i], 10);

                            (y < 100) && (y += (y > 29) ? 1900 : 2000);

                            break;

                       case "%b":

                       case "%B":

                            for (j = 0; j < 12; ++j) {

                                     if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { m = j; break; }

                            }

                            break;

                       case "%H":

                       case "%I":

                       case "%k":

                       case "%l":

                            hr = parseInt(a[i], 10);

                            break;

                       case "%P":

                       case "%p":

                            if (/pm/i.test(a[i]) && hr < 12)

                                     hr += 12;

                            else if (/am/i.test(a[i]) && hr >= 12)

                                     hr -= 12;

                            break;

                       case "%M":

                            min = parseInt(a[i], 10);

                            break;

                   }

         }

         if (isNaN(y)) y = today.getFullYear();

         if (isNaN(m)) m = today.getMonth();

         if (isNaN(d)) d = today.getDate();

         if (isNaN(hr)) hr = today.getHours();

         if (isNaN(min)) min = today.getMinutes();

         if (y != 0 && m != -1 && d != 0)

                   return new Date(y, m, d, hr, min, 0);

         y = 0; m = -1; d = 0;

         for (i = 0; i < a.length; ++i) {

                   if (a[i].search(/[a-zA-Z]+/) != -1) {

                            var t = -1;

                            for (j = 0; j < 12; ++j) {

                                     if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) { t = j; break; }

                            }

                            if (t != -1) {

                                     if (m != -1) {

                                               d = m+1;

                                     }

                                     m = t;

                            }

                   } else if (parseInt(a[i], 10) <= 12 && m == -1) {

                            m = a[i]-1;

                   } else if (parseInt(a[i], 10) > 31 && y == 0) {

                            y = parseInt(a[i], 10);

                            (y < 100) && (y += (y > 29) ? 1900 : 2000);

                   } else if (d == 0) {

                            d = a[i];

                   }

         }

         if (y == 0)

                   y = today.getFullYear();

         if (m != -1 && d != 0)

                   return new Date(y, m, d, hr, min, 0);

         return today;

};

//扩展完成

//对象定义

var vform = new Object;

//获取弹出提示的显示位置

vform.getAbsolutePos = function(el) {

         var _p = { x: 0, y: 0 };

          do{

                                     _p.x += (el.offsetLeft - el.scrollLeft);

                                     _p.y += (el.offsetTop - el.scrollTop);

                   }

                    while(el=el.offsetParent)

     return _p;

      };

vform.toString = function()

{

         return("vForm表单验证程序\n版本:1.0beta\n作者:雷晓宝\n时间:2006-07-31\n网址:http://lxbzj.com\n许可:LGPL");

}

vform.rules = new Array;

vform.rules.add = function(obj,minLength,dataType,errmsg,maxLength,rule,patams)

{

    var curlen = this.length;

        this[curlen] = [obj,minLength,dataType,errmsg,maxLength,rule,patams];

        //this[curlen] = [ 0 ,    1    ,    2   ,   3  ,   4  ,  5 ,   6  ];

    return this.length;

}

vform.init= function()

{

         if(document.getElementById(this.form_id))

         {

                   //获取表单

                   var o = document.getElementById(this.form_id);

                   //遍历规则

                   for(var i = 0 ;i< this.rules.length;i++)

                   {

                            _r = this.rules[i]

                            //如果存在元素,则添加验证程序

                            if(_o = o.elements[_r[0]])

                            {

                                     //判断是是否必填,是否有最小长度

                                     if(_r[1] > 0 )

                                     {

                                               _o.required = true;//必填的含义和最小长度为1是一样的

                                               _o.minLength = parseInt(_r[1]);

                                     }

                                     else

                                     {

                                               _o.required = false;

                                               _o.minLength = 0;

                                     }

                                     //判断是否有最大长度;

                                     if(_r[4])

                                     {

                                               _o.maxLength = parseInt(_r[4]);

                                     }

                                     //添加长度验证函数

                                     _o.validLength = function ()

                                     {

                                               var b =true;

                                               if(this.minLength)

                                               {

                                                        b = (this.minLength <= this.value.length);

                                               }

                                               if(this.type == 'textarea' && this.maxLength )

                                               {

                                                        b = b && (this.maxLength >= this.value.length );

                                               }

                                               return (b);

                                     }

                                     //添加验证,进行格式验证

                                     switch(_r[2])

                                     {

                                               case 'e-mail':

                                                        _o.validate = function()

                                                        {

                                                                 this.isvalid = this.validLength() && this.value.isEmail();

                                                                 return (this.isvalid);

                                                        };

                                                        break;

                                               case 'url':

                                                        _o.validate = function()

                                                        {

                                                                 if (this.value.substring(0,7) != 'http://')this.value = 'http://' +this.value;

                                                                 this.isvalid = this.validLength() && this.value.isUrl();

                                                                 return (this.isvalid);

                                                        }

                                                        break;

                                               case 'date':

                                                        _o.validate = function()

                                                        {

                                                                 var _d = Date.parse(this.value)||Date.parseDate(this.value);

                                                                 this.value =  _d.toIsoDate();

                                                                 this.isvalid = this.validLength() && this.value.isDateTime();

                                                                 return (this.isvalid);

                                                                 a=a>b?1:1;

                                                        }

                                                        break;

                                               case 'number':

                                                        _o.validate = function()

                                                        {

                                                                 this.isvalid = this.validLength() && this.value.isInteger();

                                                                 return (this.isvalid);

                                                        }

                                                        break;

                                               case 'any':

                                                        _o.validate = function()

                                                        {

                                                                 this.isvalid = this.validLength();

                                                                 return  this.isvalid

                                                        }

                                                        break;

                                               default :

                                                        var regexp = /^\\\w+$/;

                                                        if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证

                                                        {

                                                                 _el = _r[2].substring(1);

                                                                 if (o.elements[_el]){

                                                                           _o.equal = _el;

                                                                           _o.validate = function()

                                                                           {

                                                                                    if(_o = this.form.elements[this.equal])

                                                                                    {

                                                                                             if ( (_o.value == this.value) && this.validLength())

                                                                                             {

                                                                                                       return true;

                                                                                             }else {

                                                                                             return false;

                                                                                             }

                                                                                    }else{

                                                                                             alert('setup error');

                                                                                    }

                                                                           }

                                                                 }else

                                                                 {

                                                                           alert(_el + 'is not a valid form element');

                                                                           _o.validate = function(){return true;}

                                                                 }

                                                        }

                                                        var regexp1 = /^\\(==|!=|>=|<=|>|<)/;

                                                        if ( regexp1.test(_r[2]) )

                                                        {

                                                                 _s0 = _r[2];

                                                                 _s1 = RegExp.$1;

                                                                 _s2 = _s0.replace(regexp1,'');

                                                                 _operator = _s1.substring(0);//比较操作符

                                                                 var regexp2 = /^\w+$/;

                                                                 if (regexp2.test(_s2))//是一个标志符,整数 或者变量

                                                                 {

                                                                           _o.operation = _operator+_s2;

                                                                           _o.validate = function()

                                                                           {

                                                                                    _b = true;

                                                                                    if (this.value.length !=0)

                                                                                    {

                                                                                             _b = eval(this.value+this.operation+';');

                                                                                    }                                                                                  

                                                                                    _b = _b && this.validLength();

                                                                                    return _b;

                                                                           }

                                                                 }

                                                        };

                                                        break;

                                     }

                                     //添加验证提示(div标签)并初始化

                                     var _p = vform.getAbsolutePos(_o);

                                     _o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y);

                                     _o.tip.init();

                                     //失去焦点时,开始验证

                                     _o.onblur =function(e)

                                     {

                                               if(this.minLength || this.value.length >0)

                                               {

                                                        if( this.validate() )

                                                        {

                                                                 this.tip.hide();

                                                        }else

                                                        {

                                                                 this.tip.show();//显示错误信息

                                                                 //this.focus(); 添加这句在ie里会导致死循环 :(

                                                                 return false;

                                                        }

                                               }

                                     }

                            }

                   }

         //焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。

                   document.getElementById(this.form_id).onsubmit = function()

                   {

                            var valid = true;

                            for(i=0;i<this.elements.length;i++)

                            {

                                     _o = this.elements[i];

                                     if(_o.minLength && !_o.isvalid)

                                     {

                                               _o.tip.show();

                                               valid = false;

                                     }

                            }

                            return valid;

                   }

         }

}

//弹出提示定义

function tip(text,className,x,y)

{

         var o = document.createElement("div");

         o.style.display = "none";

         o.innerHTML = text;

         //var t = document.createTextNode(text);

         document.body.appendChild(o);

         //o.appendChild(t);

         this.init = function(dis)

         {

                   o.className = "info";

                   o.style.left = x+"px";

                   o.style.top = y+"px";

                   o.style.zindex = 100;

                   if(dis)

                   {

                            o.style.display = "";

                   }

                   else

                   {

                            o.style.display = "none";

                   }

         }

         this.show = function()

         {

                   o.style.display = "";

         }

         this.hide = function()

         {

                   o.style.display = "none";

         }

}

function start()

{

                   vform.form_id = 'form1';//必须是表单的id

                   vform.err_class = 'info';//出错提示的样式

         //验证规则,逐条填写

vform.rules.add('frm_name',1,'e-mail','请您按照 [email]user@domain.com[/email] 的格式输入电子邮件地址。

<span style="color:#f00">必填项目</span>');

                   vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。

<span style="color:#f00">必填项目</span>');

                   vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。

<span style="color:#f00">必填项目</span>');

                   vform.rules.add('qq',0,'number','这必须是一个整数');

                   vform.rules.add('least10',10,'any','您必须至少填写10个

<span style="color:#f00">必填项目</span>');

                   vform.rules.add('ok100',1,'any','这里被限制为100个字符

<span style="color:#f00">必填项目</span>',100);

                   vform.rules.add('r_pass0',5,'any','密码最短5位最长20位

<span style="color:#f00">必填项目</span>',20);

                   vform.rules.add('r_pass1',5,"\\r_pass0",'确认密码错误

<span style="color:#f00">必填项目</span>',20);

                   vform.rules.add('frm_sel',1,"\\>2",'必须大于2000

<span style="color:#f00">必填项目</span>');

                   vform.init();

}

</script>

</head>

<body onload="start()">

<form id="form1" name="form1" method="get" action="">

         <label for="frm_name">e-mail:

         <input name="frm_name" type="text" class="text_input" id="frm_name" title="输入一个电子邮箱地址"/>

         </label>

         *

         <p>

                   <label for="r_pass0">输入密码:

                   <input name="r_pass0" type="text" class="text_input" id="r_pass0" title="输入您希望的密码 " />

                   </label>

         *</p>

         <p>

                   <label for="r_pass1">密码确认:

                   <input name="r_pass1" type="text" class="text_input" id="r_pass1" title="将密码确认一次" />

                   </label>

         *</p>

         <p>

                   <label for="frm_sel">选择:

                   <select name="frm_sel" id="frm_sel" title="请选择一个答案">

                            <option value="0">请选择一个答案</option>

                            <option value="1" selected="selected">1000</option>

                            <option value="2">2000</option>

                            <option value="3">3000</option>

                            <option value="4">4000</option>

                            <option value="5">5000</option>

                            <option value="6">6000</option>

                   </select>

</label>

         *</p>

         <p>

                   <label for="input3">输入网址:

                   <input name="myweb" type="text" class="text_input" id="input3" title="输入一个网址" onmousemove="" value="http://" maxlength="100"/>

                   </label>

         *</p>

         <p>

                   <label for="dateinput">输入日期

                   <input name="dateinput" type="text" class="text_input" title="输入一个日期" id="dateinput"/>

</label>

         *</p>

         <p>

                   <label for="mub">输入数字

                   <input name="qq" type="text" class="text_input" title="填写数字" id="mub"/>

                   </label>

         </p>

         <p>

                   <label for="len">输入任意但长度限制为10个

                   <input name="least10" type="text" class="text_input" maxlength="88" id="len"/>

                   *

                   </label>

         </p>

         <p>

                   <label for="text">只能输入100个

                   <textarea name="ok100" cols="40" rows="5" id="text" title="详细内容"></textarea>

                   *

                   </label>

         </p>

         <p>

                   <input type="submit" name="Submit" value="提交" />

                   <button onclick="alert(vform)" >关于验证程序</button>

         </p>

</form>

<!--具体的日期设置,必须放在body的结束标签前面-->

<script type="text/javascript">

                   vform .init();

                                     Calendar.setup({

                            inputField     :    "dateinput",   // 把这个改成你需要的 id

                            ifFormat       :    "%Y-%m-%d %H:%M", // format of the input field

                            showsTime      :    true,

                            //button               :    "dateinput_btn",

                            timeFormat     :    "24"

                    });

         </script>

<!--END具体的日期设置,必须放在body的结束标签前面-->

<div class="title">

         <h1>vForm1.0beta</h1>

         <ul>

                   <li>作者:雷晓宝</li>

                   <li>时间:2006-08-08</li>

                   <li>网址:http://lxbzj.com</li>

                   <li>e-mail:lxbzmy@163.com</li>

                   <li>许可:LGPL</li>

         </ul>

         <h2>功能简述:</h2>

         <ol>

           <li>

             <h3>验证:</h3>

             <ul>

               <li>http地址。</li>

          <li>时间日期</li>

               <li>e-mail</li>

               <li>数字</li>

               <li>字符长度检查</li>

               <li>一项输入与另一项输入比较(例如:密码的确认输入)</li>

               <li>大小比较(只能有一个比较符号)</li>

        </ul>

           </li>

      <li>

        <h3>特点</h3>

        <ul>

          <li>扩展容易,可以方便的添加自己需要的验证方式</li>

          <li>兼容性好(ie5,6 firefox,oprea)。</li>

        <li>可用性好,没有使用alert()来弹出提示;</li>

        </ul>

      </li>

  </ol>

         <p> </p>

         <h2>使用方法</h2>

         <p>使用时,需要定义一个出错提示框的样式,本例的样式为:<code>div.info {

             width: 170px;

    overflow:visible;

    height:auto;

    font-size: small;

    position: absolute;

    background-color: #FFffdd;

    border: 1px solid #000;

    filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);

    padding: 5px;

    }</code></p>

         <p>然后在网页&lt;head&gt;部分中添加<code>&lt;script type="text/javascript" src="calendar/calendar.js"&gt;&lt;/script&gt;</code>

           ,然后可以写一个函数设置表单名称,验证规则,<code>function start()

           {

           vFormvform.form_id = 'form1';

                   vform.err_class = 'info';

                   // (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams)

                   //验证规则,逐条填写

                   vform.rules.add('frm_name',1,'e-mail','请您按照 [email]user@domain.com[/email] 的格式输入电子邮件地址。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');

                   vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');

                   vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');

                   vform.rules.add('qq',0,'number','这必须是一个整数');

                   vform.rules.add('least10',10,'any','您必须至少填写10个&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;');

                   vform.rules.add('ok100',1,'any','这里被限制为100个字符&lt;br /&gt;&lt;span style="color:#f00"&gt;必填项目&lt;/span&gt;',100);

           vform.init();

           }</code>最后为body添加onload事件。           <code>            &lt;body onload="start();"&gt;

         </code></p>

         <p> </p>

</div>

</body>

</html>

表单的客户端javascript验证有各种各样的写法,登录为form的onsubmit事件或submit按扭写一个函数。对于小表单(只有一两个表单域的表单)就不必再专门再用javascript写一个验证函数了,只需要在form的onsubmit事件里加上:

onsubmit=”return domainname.value==”?(alert(’请输入搜索内容’),false):true;”

这样只有一句话,实现了验证成功时提交,失败时给出提示的功能。其中domainname是要被验证的表单域的名字。当然当表单域比较多、验证过程比较复杂时这样写就不适合了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java3y

DOM编程

什么是DOM? DOM(Document Object Model)文档对象模型,是语言和平台的中立接口。。 允许程序和脚本动态地访问和更新文档的内容。 为什么...

34970
来自专栏IT 指南者专栏

前端系列之JavaScript基础知识概述

微信公众号:compassblog 欢迎关注、转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1、什么是JavaScript (1)、JavaScri...

32190
来自专栏互联网杂技

jQuery插件编写步骤详解

本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq...

481110
来自专栏LIN_ZONE

写jquery插件(转载)

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘...

15030
来自专栏柠檬先生

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件的集合 HTML控件     一下HTML input 元素被称为HTML 控件:   ...

23170
来自专栏前端杂货铺

jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓...

37080
来自专栏HTML5学堂

JavaScript 基础语法

讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进...

36340
来自专栏超然的博客

让js调试更简单—console

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

14510
来自专栏后台全栈之路

XML 语法速查笔记

相比起 Json,XML 是一种相对古老和复杂、但功能更加强大的数据存储/传输格式。也因为其复杂,有一些语法需要记录一下,在使用多种语言进行 XML 操作的时候...

36560
来自专栏LIN_ZONE

js中的异步与同步,解决由异步引起的问题

之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性

23820

扫码关注云+社区

领取腾讯云代金券