2021.10.07

最新推荐文章于 2024-05-20 22:56:38 发布

sgfy_

最新推荐文章于 2024-05-20 22:56:38 发布

阅读量59

点赞数

文章标签：正则表达式 html javascript

本文链接：https://blog.csdn.net/sgfy_/article/details/120639862

版权

24、Docuement对象中的方法介绍

getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    //需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否合法
    //验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位。
    function onclickFun() {
        //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
        var usernameObj = document.getElementById("username");
        //[object HTMLInputElement]它就是dom对象
        var usernameText=usernameObj.value;//获取输入框输入的值
        //如何验证字符串，符合某个规则，需要使用正则表达式技术
        var patt=/^\w{5,12}$/;
        //test()方式用于测试某个字符串，是不是匹配我的规则
        //匹配就返回true。不匹配就返回false。
        if (patt.test(usernameText)){
            alert("用户名合法！");
        }else{
           alert("用户名不合法！");
        }

    }
    </script>
<body>
        用户名：<input type="text" id="username"/>
        <button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示字符串中，是否包含字母e
        //var patt=new RegExp("e");
        //表示字符串中是否包含字母a或b或c
        //var patt=/[abc]/;
        //表示字符串中是否包含小写字母
        //var patt=/[a-z]/;
        //表示字符串中是否包含大写字母
        //var patt=/[A-Z]/;
        //表示字符串中是否包含任意数字
        //var patt=/[0-9]/;
        //表示要求字符串，是否包含字母、数字、下划线
        //var patt=/\w/;
        //表示要求字符串中是否包含至少一个a
        //var patt=/a+/;
        //表示要求字符串中是否包含零个或多个a
        //var patt=/a*/;
        //表示要求字符串中是否包含一个或零个a
        //var patt=/a?/;
        // 表示要求字符串中是否包含三个a
        //var patt=/a{3}/;
        // 表示要求字符串中是否包含至少三个连续的a，最多5个连续的a
        //var patt=/a{3,5}/;
        // 表示要求字符串中是否包含至少三个连续的a
        //var patt=/a{3,}/;
        // 表示要求字符串必须以a结尾
        //var patt=/a$/;
        // 表示要求字符串必须以a开头
        //var patt=/^a/;
        //表示要求字符串中是否包含至少三个连续的a
        //var patt=/a{3,5}/;
        // 表示要求字符串中是否包含至少三个连续的a，最多5个连续的a（从头到尾必须匹配）
        //var patt=/^a{3,5}$/;
        var str="abcd";
        alert(patt.test(str));
    </script>
</head>AZ
<body>

</body>
</html>

两种常见的验证提示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    //需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否合法
    //验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位。
    function onclickFun() {
        //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
        var usernameObj = document.getElementById("username");
        //[object HTMLInputElement]它就是dom对象
        var usernameText=usernameObj.value;//获取输入框输入的值
        //如何验证字符串，符合某个规则，需要使用正则表达式技术
        var patt=/^\w{5,12}$/;
        //test()方式用于测试某个字符串，是不是匹配我的规则
        //匹配就返回true。不匹配就返回false。
        var usernameSpanObj=document.getElementById("usernameSpan");
        //innerHtml 表示起始标签和结束标签中的内容
        //innerHtml 这个属性可读可写
        usernameSpanObj.innerHTML="sb";

        if (patt.test(usernameText)){
            usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">";
        }else{
            usernameSpanObj.innerHTML="<img src=\"false.png\" width=\"18\" height=\"18\">";
        }

    }
    </script>
<body>
        用户名：<input type="text" id="username"/>
        <span id="usernameSpan" style="color: red">

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

getElementsByName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作和数组一样
            //集合中每个元素都是dom对象
            //这个集合的元素顺序是他们在html页面中从上到下的顺序
            var hobbies=document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是true，不选中是false
            //这个属性可读，可写
            //alert(hobbies.length);//3
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }//全选
        function checkNo() {
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作和数组一样
            //集合中每个元素都是dom对象
            //这个集合的元素顺序是他们在html页面中从上到下的顺序
            var hobbies=document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中是true，不选中是false
            //这个属性可读，可写
            //alert(hobbies.length);//3
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }//全不选
        function checkReverse() {
            var hobbies=document.getElementsByName("hobby");
            for (var i=0;i<hobbies.length;i++){
                hobbies[i].checked=!hobbies[i].checked;
            }
        }//反选
    </script>
</head>
<body>
        兴趣爱好：
        <input type="checkbox" name="hobby" value="cpp">C++
        <input type="checkbox" name="hobby" value="java">Java
        <input type="checkbox" name="hobby" value="js">JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>

</body>
</html>

注：

document对象的三个查询方法,如果有id属性，优先getElementById方法进行查询

如果没有id属性，则优先使用getElementByName方法来查询

如果id属性和name属性都没有最后再按标签名来查getElementByTagName

以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象。

sgfy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.10.07

24、Docuement对象中的方法介绍getElementById()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script type="text/javascript"> //需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否
复制链接

扫一扫