javascript基础－5

正则表达式在javascript中起到了非常重要的作用，其中应用之一就是表单的验证，对于正则是什么我在这里就不多介绍了，因为正则的知识含量不亚于javascript，感兴趣的同学可以自行上网上找一些资料看看。

在javascript中我们使用RegExp()这个构造函数来创建

        1: <script type="text/javascript">

       2:     var pattern=new RegExp("[0-9]");

       3: </script>

       1: <script type="text/javascript">

       2:     var pattern=new RegExp("[0-9]*");

       3:     if(pattern.exec("12345","12345"))

       4:     {

       5:         alert("ok");

       6:     }

       7: </script>

要上段代码中我们使用了一个exec的方法，这个方法有二个函数，第一参数是需要验证的正则表达式，第二参数是要验证的字符串。如果符合验证条件的话就返回一个真，否则就是一个假值被返回，看的出来这里面的核心其实就是如何写好正则表达式，其实说正则这个工西工具非常强大，但是用好它就不是容易的事情了，我在下面收集整理了一些常用的正则表达式希望大家能用的上。

   1: 匹配中文字符的正则表达式： [u4e00-u9fa5]

   2: 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

3:

   4: 匹配双字节字符(包括汉字在内)：[^x00-xff]

   5: 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

6:

   7: 匹配空白行的正则表达式：ns*r

   8: 评注：可以用来删除空白行

9:

  10: 匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />

  11: 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

12:

  13: 匹配首尾空白字符的正则表达式：^s*|s*$

  14: 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

15:

16:

  17: 匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

  18: 评注：表单验证时很实用

19:

  20: 匹配网址URL的正则表达式：[a-zA-z]+://[^s]*

  21: 评注：网上流传的版本功能很有限，上面这个基本可以满足需求

22:

  23: 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

  24: 评注：表单验证时很实用

25:

  26: 匹配国内电话号码：d{3}-d{8}|d{4}-d{7}

  27: 评注：匹配形式如 0511-4405222 或 021-87888822

28:

  29: 匹配腾讯QQ号：[1-9][0-9]{4,}

  30: 评注：腾讯QQ号从10000开始

31:

  32: 匹配中国邮政编码：[1-9]d{5}(?!d)

  33: 评注：中国邮政编码为6位数字

34:

  35: 匹配身份证：d{15}|d{18}

  36: 评注：中国的身份证为15位或18位

37:

  38: 匹配ip地址：d+.d+.d+.d+

  39: 评注：提取ip地址时有用

40:

  41: 匹配特定数字：

  42: ^[1-9]d*$　 　 //匹配正整数

  43: ^-[1-9]d*$ 　 //匹配负整数

  44: ^-?[1-9]d*$　　 //匹配整数

  45: ^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）

  46: ^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）

  47: ^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数

  48: ^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数

  49: ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数

  50: ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）

  51: ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）

  52: 评注：处理大量数据时有用，具体应用时注意修正

53:

  54: 匹配特定字符串：

  55: ^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串

  56: ^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串

  57: ^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串

  58: ^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串

  59: ^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

60:

  61: 在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:

62:

  63: 只能输入数字：“^[0-9]*$”

  64: 只能输入n位的数字：“^d{n}$”

  65: 只能输入至少n位数字：“^d{n,}$”

  66: 只能输入m-n位的数字：“^d{m,n}$”

  67: 只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”

  68: 只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”

  69: 只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”

  70: 只能输入非零的正整数：“^+?[1-9][0-9]*$”

  71: 只能输入非零的负整数：“^-[1-9][0-9]*$”

  72: 只能输入长度为3的字符：“^.{3}$”

  73: 只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”

  74: 只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”

  75: 只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”

  76: 只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”

  77: 只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”

  78: 验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，

79:

  80: 只能包含字符、数字和下划线。

  81: 验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”

  82: 只能输入汉字：“^[u4e00-u9fa5],{0,}$”

  83: 验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”

  84: 验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”

  85: 验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”

86:

  87: 正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，

88:

  89: “XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。

  90: 验证身份证号（15位或18位数字）：“^d{15}|d{}18$”

  91: 验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”

  92: 验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”

93:

  94: 正确格式为：“01”“09”和“1”“31”。

95:

  96: 匹配中文字符的正则表达式： [u4e00-u9fa5]

  97: 匹配双字节字符(包括汉字在内)：[^x00-xff]

  98: 匹配空行的正则表达式：n[s| ]*r

  99: 匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/

 100: 匹配首尾空格的正则表达式：(^s*)|(s*$)

 101: 匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

 102: 匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

 103:

 104: (1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

 105: String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}

 106:

 107: (2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现

 108: String.prototype.trim = function()

 109: {

 110: return this.replace(/(^s*)|(s*$)/g, “”);

 111: }

 112: (3)应用：利用正则表达式分解和转换IP地址

 113: function IP2V(ip) //IP地址转换成对应数值

 114: {

 115: re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式

 116: if(re.test(ip))

 117: {

 118: return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1

 119: }

 120: else

 121: {

 122: throw new Error(”Not a valid IP address!”)

 123: }

 124: }

 125: (4)应用：从URL地址中提取文件名的javascript程序

 126: s=”http://www.9499.net/page1.htm”;

 127: s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm

 128: (5)应用：利用正则表达式限制网页表单里的文本框输入内容

 129: 用正则表达式限制只能输入中文：

 130: onkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”) ”

 131: onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”

 132: 用正则表达式限制只能输入全角字符：

 133: onkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ”

 134: onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”

 135: 用正则表达式限制只能输入数字：

 136: onkeyup=”value=”/blog/value.replace(/["^d]/g,”) “

 137: onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”

 138: 用正则表达式限制只能输入数字和英文：

 139: onkeyup=”value=”/blog/value.replace(/[W]/g,””) “

 140: onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’)

下面通过一个简单的小例子向大家演示一下正则的作用（出处来源于灰豆宝宝.net）

demo.html

       1: <script language="JavaScript" src="Check.js"></script>

       2: 通用表单函数测试:

       3: <form name="form1" onsubmit="return CheckForm(this)">

       4: test:<input type="text" name="test"/>不验证<br />

       5: 账号:<input type="text" check="^\S+$" warning="账号不能为空,且不能含有空格" name="id"/>不能为空<br />

       6: 密码:<input type="password" check="\S{6,}" warning="密码六位以上" name="id"/>六位以上<br />

       7: 电话:<input type="text" check="^\d+$" warning="电话号码含有非法字符" name="number" value=""/><br />

       8: 相片上传:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片应该为JPG,BMP格式的" name="pic" value="1"/><br />

       9: 出生日期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日期格式 2004-08-10"  name="dt" value=""/>日期格式2004-08-10<br />

省份:

<select name="sel" check="^0$" warning="请选择所在省份">

<option value="">请选择

</option><option value="1">福建省

</option><option value="2">湖北省

</option></select>

<br />

选择你喜欢的运动:<br />

游泳<input type="checkbox" name="c" check="^0{2,}$" warning="请选择2项或以上"/>

篮球<input type="checkbox" name="c"/>

足球<input type="checkbox" name="c"/>

排球<input type="checkbox" name="c"/>

<br />

你的学历:

大学<input type="radio" name="r" check="^0$" warning="请选择一项学历"/>

中学<input type="radio" name="r"/>

小学<input type="radio" name="r"/>

<br />

个人介绍:

<textarea name="txts" check="^[\s|\S]{20,}$" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上

<input type="submit"/>

</form>

check.js

       1: ////////////////////////////////////////////////////////////////////////////////

       2: /*

       3:  *--------------- 客户端表单通用验证CheckForm(oForm) -----------------

       4:  * 功能:通用验证所有的表单元素.

       5:  * 使用:

       6:  *    <form name="form1" onsubmit="return CheckForm(this)">

       7:  *    <input type="text" name="id" check="^\S+$" warning="id不能为空,且不能含有空格"/>

       8:  *    <input type="submit"/>

       9:  *    </form>

 * author:wanghr100(灰豆宝宝.net)

 * email:wanghr100@126.com

 * update:19:28 2004-8-23

 * 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.

 * 已实现功能:

 * 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证

 * 待实现功能:把正则表式写成个库.

 *--------------- 客户端表单通用验证CheckForm(oForm) -----------------

 */

////////////////////////////////////////////////////////////////////////////////

 

//主函数

function CheckForm(oForm)

{

    var els = oForm.elements;

    //遍历所有表元素

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

    {

        //是否需要验证

        if(els[i].check)

        {

            //取得验证的正则字符串

            var sReg = els[i].check;

            //取得表单的值,用通用取值函数

            var sVal = GetValue(els[i]);

            //字符串->正则表达式,不区分大小写

            var reg = new RegExp(sReg,"i");

            if(!reg.test(sVal))

            {

                //验证不通过,弹出提示warning

                alert(els[i].warning);

                //该表单元素取得焦点,用通用返回函数

                GoBack(els[i])  

                return false;

            }

        }

    }

}

 

//通用取值函数分三类进行取值

//文本输入框,直接取值el.value

//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个

//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个

function GetValue(el)

{

    //取得表单元素的类型

    var sType = el.type;

    switch(sType)

    {

        case "text":

        case "hidden":

        case "password":

        case "file":

        case "textarea": return el.value;

        case "checkbox":

        case "radio": return GetValueChoose(el);

        case "select-one":

        case "select-multiple": return GetValueSel(el);

    }

    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数

    function GetValueChoose(el)

    {

        var sValue = "";

        //取得第一个元素的name,搜索这个元素组

        var tmpels = document.getElementsByName(el.name);

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

        {

            if(tmpels[i].checked)

            {

                sValue += "0";

            }

        }

        return sValue;

    }

    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数

    function GetValueSel(el)

    {

        var sValue = "";

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

        {

            //单选下拉框提示选项设置为value=""

            if(el.options[i].selected && el.options[i].value!="")

            {

                sValue += "0";

            }

        }

        return sValue;

    }

}

 

//通用返回函数,验证没通过返回的效果.分三类进行取值

//文本输入框,光标定位在文本输入框的末尾

//单多选,第一选项取得焦点

//单多下拉菜单,取得焦点

function GoBack(el)

{

    //取得表单元素的类型

    var sType = el.type;

    switch(sType)

    {

        case "text":

        case "hidden":

        case "password":

        case "file":

        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();

        case "checkbox":

        case "radio": var els = document.getElementsByName(el.name);els[0].focus();

        case "select-one":

        case "select-multiple":el.focus();

    }

}