正则表达式

正则表达式的创建

语法形式:/^$/(^开头$结尾)正则表达式类型检测为object

// 创建正则表达式
var regexp1=/^\d{6}$/;
var regexp2=new RegExp('^\\d{6}$');

元字符

方括号表示法

面试:请验证某字符串是否是4位小写字母,且最后一位不能是m字母

var regexp=/^[a-z]{3}[a-ln-z]$/;

量词 

//题目1 验证手机号码11位 并且1开头
var regexp1=/^1\d{10}$/;

//题目2 验证字符串:以字母开头,中间任意位数字(至少一位),字母为结尾
var regexp2=/^[a-zA-Z]\d+[a-zA-Z]$/;

//题目3 验证字符串:以www.开头,中间任意位字符(字母数字下划线至少一位),最后以.com结尾,也可以以.com.cn结尾
var regexp3=/^www\.\w+\.com(\.cn)?$/;

修饰符

 

正则表达式的相关方法

 

字符串的相关方法

var str='abc123def456gh789';

//replace()方法
var result1=str.replace(/[a-z]+/g,'*');
console.log(result1);    //*123*456*789

//split()方法
var result2=str.split(/\d+/g);
console.log(result2);    //["abc","def","gh",""]

var result3=str.search(/\d+/g);
var result4=str.search(/m/g);
console.log(result3);    //3
console.log(result4);    //-1

var result5=str.match(/\d+/g);
console.log(result5);    //["123","456","789"]

正则表达式的应用(表单验证)


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <p>
            请输入中文姓名:
            <input type="text" id="nameField">
            <span class="warning" id="nameWarning">输入的姓名不合法</span>
        </p>
        <p>
            请输入手机号码:
            <input type="text" id="telField">
            <span class="warning" id="telWarning">输入的手机号码不合法</span>
        </p>
        <p>
            请输入Email:
            <input type="text" id="emailField">
            <span class="warning" id="emailWarning">输入的Email不合法</span>
        </p>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var telField = document.getElementById('telField');
        var emailField = document.getElementById('emailField');
        var nameWarning = document.getElementById('nameWarning');
        var telWarning = document.getElementById('telWarning');
        var emailWarning = document.getElementById('emailWarning');

        // 当文本框失去焦点,就是光标不在文本框中了
        nameField.onblur = function () {
            // 得到姓名
            var name = nameField.value;
            if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
                // 如果通过校验
                nameWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                nameWarning.style.display = 'inline';
            }
        };

        telField.onblur = function () {
            // 得到电话
            var tel = telField.value;
            if (/^1\d{10}$/.test(tel)) {
                // 如果通过校验
                telWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                telWarning.style.display = 'inline';
            }
        };

        emailField.onblur = function () {
            // 得到email
            var email = emailField.value;
            // 合法的email都是abc_def123@abc.net

            if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
                // 如果通过校验
                emailWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                emailWarning.style.display = 'inline';
            }
        };
    </script>
</body>

</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值