javascript 表单验证RegExp正则表达式

1. 正则表达式在js中的使用

    // 1. 利用 RegExp对象来创建 正则表达式
    var regexp = new RegExp(/123/);
    console.log(regexp);
    // 2. 利用字面量创建 正则表达式
    var rg = /123/;
    // 3.test 方法用来检测字符串是否符合正则表达式要求的规范
    console.log(rg.test(123));
    console.log(rg.test('abc'));

2. 边界符 ^ $

    var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
    // /abc/ 只要包含有abc这个字符串返回的都是true
    console.log(rg.test('abc'))//true
    console.log(rg.test('abcd'));//true
    console.log(rg.test('aabcd'));//true
    console.log('---------------------------');
    //^表示以abc开头
    var reg = /^abc/;
    console.log(reg.test('abc')); // true
    console.log(reg.test('abcd')); // true
    console.log(reg.test('aabcd')); // false
    console.log('---------------------------');
    //$表示已xx结尾
     // /^abc$/ // 精确匹配 要求必须是 abc字符串才符合规范
    var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
    console.log(reg1.test('abc')); // true
    console.log(reg1.test('abcd')); // false
    console.log(reg1.test('aabcd')); // false
    console.log(reg1.test('abcabc')); // false

3 量词符: 用来设定某个模式出现的次数

    // var reg = /^a$/;
    // console.log(reg.test('a'));
    // console.log(reg.test('aa'));


    // 1. * 相当于 >= 0 可以出现0次或者很多次 
    // var reg = /^a*$/;
    // console.log(reg.test(''));
    // console.log(reg.test('a'));
    // console.log(reg.test('aa'));
    // console.log(reg.test('aaaaaa'));

    // 2. + 相当于 >= 1 可以出现1次或者很多次
    // var reg = /^a+$/;
    // console.log(reg.test(''));
    // console.log(reg.test('a'));
    // console.log(reg.test('aa'));
    // console.log(reg.test('aaaaaa'));
    // 3. ?  相当于 1 || 0
    // var reg = /^a?$/;
    // console.log(reg.test(''));
    // console.log(reg.test('a'));
    // console.log(reg.test('aa'));
    // console.log(reg.test('aaaaaa'));
    // 4. {3 } 就是重复3次
    // var reg = /^a{3}$/;
    // console.log(reg.test(''));
    // console.log(reg.test('a'));
    // console.log(reg.test('aa'));
    // console.log(reg.test('aaaaaa'));
    // console.log(reg.test('aaa'));
    // 5. {3, }  大于等于3
    var reg = /^a{3,}$/;
    console.log(reg.test(''));
    console.log(reg.test('a'));
    console.log(reg.test('aa'));
    console.log(reg.test('aaaaaa'));
    console.log(reg.test('aaa'));
    // 6. {3, 16}  大于等于3 并且 小于等于16

    var reg = /^a{3,16}$/;
    console.log(reg.test(''));
    console.log(reg.test('a'));
    console.log(reg.test('aa'));
    console.log(reg.test('aaaaaa'));
    console.log(reg.test('aaa'));
    console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa'));

4.案例 用户名检验

  <input type="text" class="uname"> <span>请输入用户名</span>
  <script>
    //  量词是设定某个模式出现的次数
    var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
     var uname = document.querySelector('.uname');
    var span = document.querySelector('span');
    uname.onblur = function() {
        if (reg.test(this.value)) {
            console.log('正确的');
            span.className = 'right';
            span.innerHTML = '用户名格式输入正确';
        } else {
            console.log('错误的');
            span.className = 'wrong';
            span.innerHTML = '用户名格式输入不正确';
        }
    }

5. 中括号 字符集合.匹配方括号中的任意字符.

    // var reg = /^[abc]$/;
    // a 也可以 b 也可以 c 可以  a ||b || c
    // 大括号  量词符. 里面表示重复次数
    // var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
    // console.log(reg.test('abc'));
    // console.log(reg.test('abcabcabc'));
    // console.log(reg.test('abccc'));

    // 小括号 表示优先级
    var reg = /^(abc){3}$/; // 它是让abcc重复三次
    console.log(reg.test('abc'));
    console.log(reg.test('abcabcabc'));
    console.log(reg.test('abccc'));   

7. 替换 replace

    // var str = 'andy和red';
    // // var newStr = str.replace('andy', 'baby');
    // var newStr = str.replace(/andy/, 'baby');
    // console.log(newStr);
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.onclick = function() {
    // g表示全部替换
        div.innerHTML = text.value.replace(/激情|gay/g, '**');
    }