Javascript 笔记

2023-11-08 21:27•javascript•阅读 621

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正则比较两个字符串，

就是利用正则表达式快速比较两个字符串的不同字符。

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>

JavaScript验证两次输入密码是否相同，

通过去判断两次输入的密码是否相同来实现，

下面是html代码

</FORM>

下面是javascript的代码

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日更新，下面的验证两次输入密码，是否相同也同样可以使用，记录下

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>

再加一个验证两次输入密码是否相同的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

或者:

function document.oncontextmenu() {

return false;

}

</script>

function nocontextmenu(){

if(document.all) {

event.cancelBubble=true;

event.returnvalue=false;

return false;

}}

或者:

function rclick(){

if(document.all) {

if (event.button == 2){

event.returnvalue=false;

}}}

</script>

另外

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

可用于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代码如下：

<!--

function document.onkeydown(){

event.keyCode = 0;

event.returnvalue = false;

}

-->

</script>

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

function window.onbeforeunload()

{

if(event.clientX>document.body.

clientWidth&&event.clientY<0||event.altKey)

{

window.event.returnvalue = "";

}

</script>

或者使用全屏打开页面

<!--

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键

代码如下

<!--

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标签里加上

JavaScript屏蔽拷屏,不断地清空剪贴板

在body标签里加上

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

JavaScript屏蔽网站的打印功能

<style>

@media print {

* { display: none }

}

</style>

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

方法一：

方法二：

JavaScript屏蔽页中所有的script

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中是表单项只能为数字和"_"，同样您可以进行扩展来达到您想要的目的。用于电话/银行帐号验证上,可扩展到域名注册等

<!--

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验证邮箱格式

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>

第二种：用Javascript验证email填写是否正确

<html>

<head>

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>

</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验证只能是英文字符和数字

问题代码如下：

现在无论输入什么字符它都提示，为什么？？高手指点！谢谢

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> 代码如下：

现在无论输入什么字符它都提示，为什么？？高手指点！谢谢

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>

function check()

{

if(document.form1.user_name.value=="")

{

alert("请输入真实姓名！");

document.form1.user_name.focus();

return false;

}

在这写楼上的判断程序，怎么改写呢？

}

</script>

这样我点保存按钮时同时判断用户名和序列号

上一篇《javascript验证是数字》不能验证是否有小数点这样的数字，现在更新了下可以验证带小数点的小数，原理还是一样，通过event.keycode来限制用户的输入，不过在客户端限制JS运行的情况下可就没效果了哦

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>

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代码很简洁，大家可以看下。

function onlyNum()

{

if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))

//考虑小键盘上的数字键

event.returnvalue=false;

}

</script>

下面还有一种比较笨的方法，大家也可以看下，学习嘛

下次贴个用正则验证数字的

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>

</body>

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

只能是英文,好简单吧，用的就是正则，javascript验证英文的正则表达式

function onlyEng()

{

if(!(event.keyCode>=65&&event.keyCode<=90))

event.returnvalue=false;

}

</script>

只能是汉字,好简单吧，用的就是正则，javascript验证中文的正则表达式

07年9月19日补：

加了一个验证中文的函数

如下：

function isChn(str){

var reg = /^[u4E00-u9FA5]+$/;

if(!reg.test(str)){

return false;

}

return true;

}

需要用的时候直接调用这个函数就可以了，同样也是使用javascript的正则表达式来验证验证中文的

长度限制

function test()

{

if(document.a.

b.value.length>50)

{

alert("不能超过50个字符！");

document.a.b.focus();

return false;

}

</script>

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

<head>

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

<!--

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>

//程序基本思路：通过扩展对象来实现，将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 >必填项目</span>');

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

<span >必填项目</span>');

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

<span >必填项目</span>');

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

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

<span >必填项目</span>');

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

<span >必填项目</span>',100);

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

<span >必填项目</span>',20);

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

<span >必填项目</span>',20);

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

<span >必填项目</span>');

vform.init();

}

</script>

</head>

<form >

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

</label>

<p>

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

</label>

*</p>

<p>

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

</label>

*</p>

<p>

<label for="frm_sel">选择：

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

</select>

</label>

*</p>

<p>

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

</label>

*</p>

<p>

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

</label>

*</p>

<p>

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

</label>

</p>

<p>

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

</label>

</p>

<p>

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

</label>

</p>

<p>

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

</p>

</form>

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>

<h1>vForm1.0beta</h1>

<ul>

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

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

</ul>

<ol>

<li>

<ul>

<li>http地址。</li>

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

<li>一项输入与另一项输入比较（例如：密码的确认输入）</li>

<li>大小比较（只能有一个比较符号）</li>

</ul>

</li>

<li>

<ul>

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

<li>兼容性好（ie5,6 firefox,oprea）。</li>

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

</ul>

</li>

</ol>

<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>然后在网页<head>部分中添加<code><script type="text/javascript" src="calendar/calendar.js"></script></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] 的格式输入电子邮件地址。<br /><span >必填项目</span>');

vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。<br /><span >必填项目</span>');

vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。<br /><span >必填项目</span>');

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

vform.rules.add('least10',10,'any','您必须至少填写10个<br /><span >必填项目</span>');

vform.rules.add('ok100',1,'any','这里被限制为100个字符<br /><span >必填项目</span>',100);

vform.init();

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

</code></p>

</div>

</body>

</html>

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

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

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

Javascript 笔记

相关推荐

JavaScript学习笔记，十——学习心得与经验小结

JavaScript学习笔记，四——厚积薄发之准备1

JavaScript学习笔记，五——厚积薄发之准备2

javaScript笔记

javascript笔记1

Maintainable JavaScript读书笔记-JavaScript 代码风格

javascript复习笔记

JavaScript读书笔记