Java Script06

最新推荐文章于 2024-11-02 12:42:04 发布

颖涛

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量378

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67333901/article/details/123319696

版权

本文介绍了前端开发中的两个关键概念：1) 使用正则表达式进行表单验证，确保用户输入的名字、密码和邮箱格式正确，并通过JavaScript实现实时反馈；2) 实现下拉框的改变事件，动态更新与之相关的下拉选项，例如根据省份选择加载对应的城市列表。这两个示例展示了前端交互和数据处理的基本技巧。

摘要由CSDN通过智能技术生成

1、表单验证

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--
为什么需要使用正则!!!! 表单验证
-->
<!--<form action="" onsubmit="return check()">-->
<form action="" id="myForm">
    <p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
    <p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
    <p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
    <p>
        <button>登录</button>
    </p>
</form>
<script>

    function checkLabel(obj,rex,tip) {
        var length = obj.value.length
        var label = obj.parentElement.getElementsByClassName("error")[0]
        if (length > 0) {//里面有内容
            if (rex.test(obj.value)) {
                label.textContent = "😊"
                return true
            }

            label.textContent = tip
            return false
        }
        label.textContent = "长度必须大于0"
        return false
    }

    myForm.onsubmit = () => {
        var f1 = checkLabel(userName)
        var f2 = checkLabel(userEmail)
        var f3 = checkLabel(userPwd)
        return f1 && f2 && f3
    }
</script>
</body>
</html>

2、下拉框的改变事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>

<script>
    var provinces=[]
    provinces["日本省"]=["北海道","桥豆麻袋","摩西摩西"]
    provinces["湖南省"]=["长沙","北京","西八"]
    provinces["广西省"]=["表妹","螺蛳粉","表郭"]


    for(let i in provinces){
        province.appendChild(new Option(i,i))
    }


    function setCity(name) {
        for(let i of provinces[name]){
            cities.appendChild(new Option(i,i))
        }
    }

    setCity(province.value)

    function myChange() {
        cities.innerHTML=""
        setCity(province.value)
    }
</script>
</body>
</html>