JS正则表达式、form表单验证、省市级联

最新推荐文章于 2022-12-22 15:56:27 发布

随心......

最新推荐文章于 2022-12-22 15:56:27 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/Hu_Mingxiang/article/details/108814114

版权

正则表达式

是以一定规则格式进行书写并用于校验匹配的字符串

基本语法 /校验规则/

校验规则语法：

【检验数据】{个数}

[]中填写的是可以输入的数据

{}中填写的是前[]中输入数据的个数

^以指定开头(存在字符合计中则表示取反)

$以指定结尾

.除换行符外字符

|或

\b是否为边界以指定字符开头或结尾

\d是否是数字

\w表示单词字符，等同于字符集合[a-zA-Z0-9_]

        //正则表达式是对字符串每位进行匹配校验
        //要求账号只能以数字小写字母组成 首位必须是字母 长度为6
        var reg = /^[a-z]{1}[a-z 0-9]{5}$/;
        //校验手机号11位  1开头
        reg = /^1{1}[3|5|7|8]{1}[0-9]{9}$/
        //是否存在@
        reg = /^[a-z]{10}/;
        //是否以c开头或以c结尾
        var str = "16555555555";
        document.write(reg.test(str))

form表单验证

减轻服务器的压力
保证输入的数据正确性
在这里插入图片描述

表单验证思路

1、在输入后直接验证：失去焦点事件

2、在提交时进行验证：(1)提交事件 (2)form表单提交方法

<!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>
        .err {
            color: red;
        }
        
        .ok {
            color: green;
        }
    </style>
    <!-- ：失去焦点事件进行form表单验证 -->
    <script>
        //账号以字母开头长度至少为6
        //密码由字母数字组成长度至少为6
        function uname() {
            var v = document.getElementById("username").value
            var s = document.getElementById("usernameSpan")
            var reg = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,}$/;
            if (reg.test(v)) {
                s.innerHTML = "账号格式正确"
                s.className = "ok"
                return true

            } else {
                s.innerHTML = "账号格式错误"
                s.className = "err"
                return false
            }
        }

        function pword() {
            var v = document.getElementById("password").value
            var s = document.getElementById("passwordSpan")
            var reg = /^[a-zA-Z0-9]{6,}$/;
            if (reg.test(v)) {
                s.innerHTML = "密码格式正确"
                s.className = "ok"
            } else {
                s.innerHTML = "密码格式错误"
                s.className = "err"
            }
        }

        function again() {
            var v1 = document.getElementById("password").value
            var v2 = document.getElementById("passwordAgain").value
            var s = document.getElementById("passwordAgainSpan")
            if (v1 == v2) {
                s.innerHTML = "两次输入密码相同"
                s.className = "ok"

            } else {
                s.innerHTML = "两次输入密码不相同"
                s.className = "err"
            }
        }

        function sub() {
            return uname() && pword() && again()
        }
    </script>
</head>

<body>
    <form action="#" onsubmit="return sub() ">

        账号： <input type="text" name="username" id="username" onblur="uname()">
        <span id="usernameSpan"></span>
        <br> 密码： <input type="password" name="password" id="password" onblur="pword()"> <span id="passwordSpan"></span>
        <br> 再次输入 <input type="password" name="passwordAgain" id="passwordAgain" onblur="again()"><span id="passwordAgainSpan"></span><br>
        <br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

省市级联

在这里插入图片描述

add(oElement , before)

在指定select下拉框中添加指定元素

oElement 指定元素

before位置默认null最后

new Option(text, value);创建选项对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var i = 1;

        function add() {
            var s = document.getElementById("select")
                //创建要添加的option元素对象
                //1 createElement创建节点元素方法
            var o = document.createElement("Option")
            o.text = i;
            o.value = i;
            s.add(o, 0)
            i++;

            //2new节点对象方法
            // var o = new Option("a", "b");
            // s.add(o, 0)
        }
    </script>
</head>


<body>
    <select name="select" id="select">
    </select>
    <button onclick="add()">添加 </button>
</body>
</html>

数组的文字下标

在js中数组的下标除了可以时数字外还可以是文字，但如果使用文字下标存储数据实际长度不会改变

实现思路
创建两个下拉列表框，分别显示省份和城市
选择某一个省份时，使用onchange事件调用函数（changeCity( )）使城市下拉列表框中显示对应的城市
页面加载时把省份名称添加到表示省份的下拉列表框中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 省市级联 -->
    <script>
        //存储数据的数组
        var provinceArr = ["河北省", "河南省", "湖北省"];
        var cityArr = new Array();
        cityArr['河北省'] = ['邯郸市', '石家庄市'];
        cityArr['河南省'] = ['郑州市', '洛阳市'];
        cityArr['湖北省'] = ['武汉市', '宜昌市'];


        window.onload = function() {
            for (var i = 0; i < provinceArr.length; i++) {
                var p = document.getElementById("province"); //获取省选择框元素对象
                var o = new Option(provinceArr[i], provinceArr[i]); //创建选项对象
                p.add(o, null); //将指定选项对象加入选择框末尾
            }
        }

        function changeCity() {
            var p = document.getElementById("province"); //获取省选择框元素对象
            var v = p.value; //获取省选择框选择的数据
            var cArr = cityArr[v]; //根据省获取市数组
            //清空当前市选择框中所有选项

            for (var i = 0; i < cArr.length; i++) {
                var c = document.getElementById("city"); //获取市选择框元素对象
                var o = new Option(cArr[i], cArr[i]); //创建选项对象
                c.add(o, null); //将指定选项对象加入选择框末尾
            }
        }
    </script>

</head>

<body>
    <select name="province" id="province" onchange="changeCity()"></select>
    <select name="city" id="city">
<option >--请选择市--</option>

    </select>
</body>
</html>