JavaEE中级.20190603.正则表达式..

最新推荐文章于 2019-08-07 22:14:45 发布

原创最新推荐文章于 2019-08-07 22:14:45 发布 · 234 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaEE阶段

本文分享了两个前端开发辅助网站，分别用于按键样式设计和统计表单样式制作。深入解析了正则表达式的定义、使用方法及修饰符，并通过实例展示了如何运用正则表达式进行表单验证。

一.分享前端两个辅助开发的网址：

1.按键的样式等：http://craftpip.github.io/jquery-confirm/

2.统计表单样式：https://echarts.baidu.com/

二.正则表达式

1.定义

1）显示定义：一眼就看明白

var 变量名 = new RegExp("正则表达式模式");

2）隐式定义: 常用，简单。没那么明显，大家可能一眼没有看出
注意:开头和结尾都必须是斜杠“/”,且不需要使用双引号括起来的

var 变量名 = /正则表达式模式/;

例子：

var myregex = new RegExp("[0-9]"); 
var myregex = /[0-9]/;

<script type="text/javascript"> 
    //显示定义 
    var reg = new RegExp("[0-9]");//匹配方括号内的数字，等价于\d 
    reg = new RegExp("\\d");//显示定义，在使用一些特殊字符时，需要转义 
    //隐式定义 
    var reg2 = /\d{6}/;//匹配6个数字 

    //拿到字符源 
    var a = "123456a123456"; 
    //进行匹配：test()返回true/false，exec()返回字符串数组 
    alert(reg.test(a)) 
    alert(reg2.test(a)); 
    console.log(reg2.exec(a)); 
</script>

2.方法

1）test
①作用:是否匹配正则表达式模式。
返回：true/false， true：匹配， false：不匹配

regex.test(str)

②举例

var reg = new RegExp('[0-9]'); 
var reg2 = /[0-9]/; 
var str = "abb12dfA45ab2"; 
console.log(reg.test(str));

3.修饰符

①修饰符

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

②用法

（1）new RegExp("regexp","修饰符")
（2）/regexp/修饰符

var reg = new RegExp('[0-9]','g'); 
var reg2 = /\d/g; var reg3 = /a/i; 
var reg4 = /a/ig; 
var str = "123eAasd45h3"; 
console.log(str.match(reg)); 
console.log(str.match(reg3)); 
console.log(str.match(reg4));

3.表单校验
验证用户名、年龄
要求：
用户名至少需要8个字符，必须以字母开头，以字母或数字结尾，可以有-和_。
年龄在1~99之间

<body> 
    <form id="form" action=""> 
        <table> 
            <tr>
                <td>姓名<span id="namespan"></span></td> 
            </tr> 
            <tr> 
                <td> <input type="text" id="name" name="name" onBlur="valName()" /> 
                </td> 
            </tr> 
            <tr> 
                <td>年龄<span id="agespan"></span></td> 
            </tr> 
            <tr> 
                <td> <input type="text" id="age" name="age" onBlur="valAge()" /> </td> 
            </tr> 
        </table> 
    </form> 
    <script type="text/javascript"> 
        //表单验证 
        function valName(){ 
            // ^：匹配输入符的开始位置 
            // $：匹配输入符的结尾位置 
            // ()：标记一个子表达式的开始和结束的位置 
            // +：匹配前面的子表达式一次或者多次 
            // ?：匹配前面的子表达式零次或一次 
            // *: 匹配前面的子表达式零次或多次 
            var pattern = 
                new RegExp("^[a-z][a-z0-9-_]*[a-z0-9]$","i"); 
            var str1=document.getElementById("name").value; 
            if(str1.length>=8){ 
                if(pattern.test(str1)){ 
                    //alert("OK"); 
                    document.getElementById("namespan").innerHTML=""; 
                    return true; 
                }else{ 
                    document.getElementById("namespan").innerHTML="<span style='color:red'>至少需要8个字符，必须以字母开头，以字母或数字结尾，可以有-和_</span>";
                     return false; 
                } 
            }else{ 
                document.getElementById("namespan").innerHTML="<span
style='color:red'>至少需要8个字符，必须以字母开头，以字母或数字结尾，可以有-和_</span>";
                 return false; 
            } 
        } 
        function valAge () { 
            var age = document.getElementById('age').value; 
            // {n,m}：n和m均为正整数，其中n<=m，最少匹配n次且最多匹配m次 
            var reg = /^[1-9][0-9]?$/g; 
            if(!reg.test(age)){ 
                document.getElementById('agespan').innerHTML='<span style="color:red">年龄要在1~99之间</span>'; 
                return false; 
            }else { 
                document.getElementById('agespan').innerHTML=''; 
                return true; 
            } 
        } 
    </script> 
</body>