表单验证和正则表达式(二)

String 类中可以支持正则的方法:

s earch =》返回匹配字符串的下标，否则返回-1

match=》如果没有找到任何匹配的文本， 返回 null。否则，它将返回一个数组（依赖于是否具有全局标志 g）

r eplace =》返回一个新的字符串

s plit =》返回一个字符串数组

/*search() 方法-使用正则表达式来检索字符串中的abc*/

var str="hello abc ";

console.log(str.search(/ abc /));  //6

console.log(str.search(/ ABC /));  //-1

 console.log(str.search(/ ABC /i)); //6

/*match() 方法-使用正则表达式来检索字符串中的所有数字*/

var str="1 and 2 and 3";

console.log(str.match(/\d/)); //[1]

console.log(str.match(/ efg /)); // null

console.log(str.match(/\d/g)); //[1,2,3]

/*replace() 方法-使用 "abc " 替换字符串中的 "yang"*/

var str="hello yang";

console.log(str.replace(/yang/," abc ")); // hello  abc

var str="hello yang, How are you?yang";

console.log(str.replace(/yang/g," abc ")); // hello abc , How are you? abc

使用函数来替换

第二种使用 r eplaceAll()

/*split() 方法-把单词分割为字母*/

console.log("hello".split("")); // h e l l o

console.log("hello".split("",3)); //[ h e l]

console.log("h1e2l3l4o".split(/\d/));  // hello

正则验证

验证26个英文字母组成的字符串

验证由数字和26个英文字母组成的字符串

验证由数字、字母、下划线组成的字符串

验证汉字

/* 验证26个英文字母组成的字符串*/

var str="sgfhdfGIYYjhj";

var reg=/^[a-zA-Z]+$/;   // 一次或多次 "+"

console.log(reg.test(str));

/* 验证由数字和26个英文字母组成的字符串*/

var str="abc123DFjh";

var reg=/^[0-9a-zA-Z]+$/;

console.log(reg.test(str));

/* 验证由数字、字母、下划线组成的字符串*/

var str="abc_123_DFjh";

var reg=/^\w+$/;

console.log(reg.test(str));

/* 验证汉字*/

var str=" 我的祖国 ";

var reg=/^[\u4e00-\u9fa5]+$/

console.log(reg.test(str));

练习1：

使用正则验证如下需求

首尾有空格的字符串（分别验证清除前面、后面、前后以及所有空格的方法）

验证手机号码

验证邮箱

/*验证首尾有空格的字符串*/

        var str= "    abc   "

        var reg= / ^ \s+ /   //去前面空格

        console. log( str. replace( reg, ''));

        //去后面的空格

        var str= ' abc  '

        var reg= /\s+ $ /

        console. log( str. replace( reg, ''));

        //去前后的空格

        var str= ' abc  '

        var reg= / ^ \s+ | \s+ $ / g

        console. log( str. replace( reg, ''));

        //清除所有空格

        var str= ' abc hy  '

        var reg= /\s+ / g

        console. log( str. replace( reg, ''));

        /*验证手机号码*/

        var str= "13502023437";

        var reg= / ^ 1 [ 34578 ][ 0-9 ]{9} $ /

       var reg= / ^ 1 [ 34578 ]\d{9} $ /

        console. log( reg. test( str));

        /*验证邮箱*/

        var str= " huyang@163.com ";

       /*  \代表转义符,把.转化为字符串,并且使用()分组,就是.com或者.cn当成一组

        var reg= / ^ [ a-zA-Z0-9_- ]+ @ [ a-zA-Z0-9_- ]+ ( \. [ a-zA-Z0-9_- ]+ )+ $ /

            /* 可以简写为如下

         var reg =/^[\w-]+@[\w-]+(\.[\w-]+)+$/

        console. log( reg. test( str));

练习2：

使用正则给如下字符串中的数字加上中括号

var str='abc 123 efg';   变成 'abc [1][2][3] efg'

var str= 'abc345efg';

        var reg1 = /\d/ g;

        var arr = str. split( '');

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

        {

            if( isNaN( arr[ i])== false)

            {

                arr[ i] = '['+ arr[ i]+ ']';

            }

        }

        str2 = arr. join( '');

        alert( str2);

使用isNaN有个 缺陷,如果有空格他也会返回fales,所以我们使用正则更好,如图:

综合案例-表单验证

user.οnblur=function(){

           reg=/^[\w\u4e00-\u9fa5]{6,12}$/;

           if(user.value==''){

            user_p.innerHTML='<i class="err"></i> 不能为空';

            return false;

        }

        else if(!reg.test(user.value)){

            user_p.innerHTML='<i class="err"></i> 长度不在范围内或者存在非法字符'

            return false;

        }

        // 用户名输入与要求一致

        else{

            user_p.innerHTML='<i class="ok"></i> 正确'

            return true

        }

}

表单验证 — 登录密码需求

psd.οnblur=function(){

        var reg= /^\w{6,12} $/;

        var reg1=/[^0-9]/;

        var reg2=/[^a-zA-Z]/;

        if(psd.value==''){

            psd_p.innerHTML='<i class="err"></i> 不能为空';

            return false;

        }

        // 长度在6-12之间 字母数字下划线

        else if(!reg.test(psd.value)){

            psd_p.innerHTML='<i class="err"></i> 长度不在范围内或者存在非法字符'

            return false;

        }

  else if(!reg1.test(psd.value))

        {

            psd_p.innerHTML='<i class="err"></i> 不能全是数字'

            return false;

        }

        else if(!reg2.test(psd.value)){

            psd_p.innerHTML='<i class="err"></i> 不能全是字母'

            return false;

        }

        // 密码输入与要求一致

        else{

            psd_p.innerHTML='<i class="ok"></i> 正确'

            return true;

        }

表单验证 — 确认密码需求

psd2.οnblur=function(){

        if(psd2.value==""){

            psd2_p.innerHTML='<i class="err"></i> 不能为空';

            return false;

        }

        // 两次密码输入不一致

        else if(psd.value!=psd2.value){

            psd2_p.innerHTML='<i class="err"></i> 两次密码不一致';

            return false;

        }

        // 密码输入与要求一致

        else{

            psd2_p.innerHTML='<i class="ok"></i> 正确'

            return true;

        }

}