JavaScript的DOM和正则表达式

最新推荐文章于 2022-06-21 08:08:40 发布

大鱼不做程序猿

最新推荐文章于 2022-06-21 08:08:40 发布

阅读量512

点赞数 1

分类专栏： JAVA学习之路（入门）文章标签：正则表达式 javascript

本文链接：https://blog.csdn.net/qq_40703471/article/details/115311651

版权

JAVA学习之路（入门）专栏收录该内容

52 篇文章 0 订阅

订阅专栏

需求：

当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。

验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        function onclickFun() {
            // 1 操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它就是dom对象
            var usernameText = usernameObj.value;
            // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术，具体介绍如下
            ///^\w{5,12}$/;表示字母，数字，下划线5-12位
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串，是不是匹配我的规则 
            *  匹配就返回true。不匹配就返回false.
            * */
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 表示起始标签和结束标签中的内容
            // innerHTML 这个属性可读，可写
            usernameSpanObj.innerHTML = "恭喜！";

            if (patt.test(usernameText)) {
                //right.png为一个对号图标，用在合法情况下
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                //wrong.png为一个错号图标，用在用户名不合法情况下
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="user"/>
    <span id="usernameSpan" style="color:red;">

    </span>
    <button onclick="onclickFun()">较验</button>
</body>
</html>

JavaScript正则表达式

var patt = /^\w{5,12}$/;
这是一个正则表达式的实例

RegExp是正则表达式的缩写。

正则表达式是描述字符模式的对象，用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法：
//表示要求字符串中，必须包含字母  e
var patt = new RegExp("e");
//或
var patt = /e/;

var str = "abcd";

alert(patt.test(str));
//输出false,因为str字符串中不包含 e
//patt.test()用来测试

方括号

表达式	描述
[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符
[0-9]	查找任何从0-9的数字
[a-z]	查找任何从小写a到小写z的字符
[A-Z]	查找任何从大写A到大写Z的字符
[A-z]	查找任何大写A到小写z的字符
[adgk]	查找给定集合内的任何字符
[^adgk]	查找给定集合外的任何字符
(red\|blue\|green)	查找任何指定的选项

元字符

元字符	描述
：	查找单个字符，除了换行和行结束符
\w	查找单词字符（包括大小写字母，数字，下划线）
\W	查找非单词字符
\d	查找数字
\D	查找非数字
\s	查找空白
\b	匹配单词边界
\o	查找NUL字符
\n	查找换行符

元字符	描述
\f	查找换页符
\r	查找回车符
\t	查找制表符
\v	查找垂直制表符
\xxx	查找以八进制数xxx规定的字符
\xdd	查找以十六进制数dd规定的字符
\uxxx	查找十六进制数xxxx规定的Unicode字符

量词

量词	描述
n+	匹配任何包含至少一个n的字符串
n*	匹配任何包含零个或多个n的字符串
n?	配任何包含零个或一个n的字符串
n{x}	匹配包含x个n的序列的字符串
n{x,y}	匹配包含x或y个n的序列的字符串
n{x,}	匹配包含至少x个n的序列的字符串
n$	匹配任何结尾为n的字符串
^n	匹配任何开头为n的字符串
?=n	匹配任何其后接指定字符串n的字符串
?!n	匹配任何其后没有紧接指定字符串n的字符串

大鱼不做程序猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM和正则表达式

需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" >
复制链接

扫一扫