webstorm的查错功能真强

最新推荐文章于 2024-03-11 22:58:53 发布

qq_24068709

最新推荐文章于 2024-03-11 22:58:53 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： js学习纰漏

本文链接：https://blog.csdn.net/qq_24068709/article/details/73867267

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--suppress ALL -->
<html>
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script>
        //标记字符串
        var arrs = new Object();
        var arrs1 = new Object();
        var password = null;
        arrs["用户名"] = [/^\S{4,20}$/, "你输入的用户名正确", "你输入的用户名不正确", 0]
        arrs["密码"] = [/^[A-Z][A-Za-z0-9]{6,11}$/, "你输入的密码格式正确", "你输入的密码格式不正确", 0]
        arrs["邮箱地址"] = [/^[\w]+([-_.][\w]+)*@([\w]+[-.])+[A-Za-zd]{2,5}$/, "你输入的邮箱地址正确", "你输入的邮箱地址不正确", 0]
        arrs["个人主页"] = [/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/, "你输入的个人主页地址格式正确", "你输入的个人主页地址格式不正确", 0]
        arrs["手机号码"] = [/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, "你输入的手机号码格式正确", "你输入的手机号码格式不正确", 0]
        arrs["QQ号"] = [/^[1-9][0-9]{4,}$/, "你输入的qq格式正确", "你输入的qq格式不正确", 0]
        arrs["出生日期"] = [/^\d{4}-\d{1,2}-\d{1,2}$/, "你输入的出生日期格式正确", "你输入的出生日期格式不正确", 0]
        function select() {
            arrs1["四川省"] = ['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
            arrs1["吉林省"] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
            arrs1["湖北省"] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];
            //输出省select
            for (var i in arrs1) {
                var optionPro = new Option(i, i);
                document.getElementById("province").options.add(optionPro);
            }
        }
        function selectPro() {
            var province = document.getElementById("province").value;
            var citys = arrs1[province];
            document.getElementById("city").options.length = 0;
            for (var i in citys) {
                var optionCity = new Option(citys[i], citys[i]);
                document.getElementById("city").options.add(optionCity);
            }
        }
        function check(str, inputx, sid) {
            var s = document.getElementById(inputx).value;
            if (str == "密码") {
                password = s;
            }
            var arr = arrs[str];
            var reg = arr[0];
            if (reg.test(s)) {
                document.getElementById(sid).innerHTML = arr[1];
                document.getElementById(sid).className = "right"
                arr[3] = 1;
            } else {
                document.getElementById(sid).innerHTML = arr[2];
                document.getElementById(sid).className = "error"
                arr[3] = 0;
            }
        }
        function pswcheck(inputx, sid) {
            var psw = document.getElementById(inputx).value;
            if (psw == password) {
                document.getElementById(sid).innerHTML = "重复输入密码一致";
                document.getElementById(sid).className = "right"
            } else {
                document.getElementById(sid).innerHTML = "密码不一致!";
                document.getElementById(sid).className = "error"
            }
        }
        function up(sid) {
            var flag = true;
            for (var i in arrs) {
                if (arrs[i][3] != 1) {
                    document.getElementById(sid).innerHTML = "信息不完整,或者存在错误!";
                    document.getElementById(sid).className = "error"
                    flag = false
                    break;
                }
            }
            if (flag) {
                document.getElementById(sid).innerHTML = "等待提交";
                document.getElementById(sid).className = "right"
            }
        }
        function move() {
            document.getElementById("div1").style.top = 100 + document.body.scrollTop + "px";
            window.onscroll = move;
        }
    </script>
    <style>
        .right {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body οnlοad="select(),move()">
<div style="position: absolute;left:300px;top:100px;z-index:4" id="div1">
    <font style="color:orangered">请输入空格键意外的字符作为用户名,长度为4~20</font><br/>
    用户名&nbsp;:<input id="input1" type="text" οnblur="check('用户名','input1','sid1')"><span
        id="sid1"></span><br/><br/>
    性别&nbsp;&nbsp;:<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br/>
    <font style="color:orangered">请输入大写字母开头6-12位的数字和字母作为密码</font><br/>
    密&nbsp;&nbsp;码:<input id="input2" type="password" οnblur="check('密码','input2','sid2')"><span
        id="sid2"></span><br/><br/>
    <font style="color:orangered">请输入再次输入密码</font><br/>
    确认密码:<input id="input3" type="password" οnblur="pswcheck('input3','sid3')"><span
        id="sid3"></span><br/><br/>
    <font style="color:orangered">请输入格式为:xxx.xxxx@xxx.xxxx或者xxx@xxx.xxx的邮箱地址</font><br/>
    邮箱地址:<input id="input4" type="text" οnblur="check('邮箱地址','input4','sid4')"><span
        id="sid4"></span><br/><br/>
    家庭住址:
    <select id="province" οnchange="selectPro()">
        <option value="请选择省">请选择省</option>
    </select>
    <select id="city">
        <option value="请选择市">请选择市</option>
    </select><br/><br/>
    <font style="color:orangered">请输入格式为:http://xxxx.xxxx.....</font><br/>
    个人主页:<input id="input5" type="text" οnblur="check('个人主页','input5','sid5')"><span
        id="sid5"></span><br/><br/>
    手机号码:<input id="input6" type="text" οnblur="check('手机号码','input6','sid6')"><span
        id="sid6"></span><br/><br/>
    QQ&nbsp;&nbsp;号:<input id="input7" type="text" οnblur="check('QQ号','input7','sid7')"><span
        id="sid7"></span><br/><br/>
    <font style="color:orangered">请输入格式为:xxxx-xx-xx的年月日</font><br/>
    出生日期:<input id="input8" type="text" οnblur="check('出生日期','input8','sid8')"><span
        id="sid8"></span><br/><br/>

    <td colspan="2"><input type="button" value="提交" οnclick="up('sid9')"><span id="sid9"></span><br/><br/>
</div>


</body>
</html>

第一次写省市级联,在拿到省名通过省数组获取市数组的时候provinces[province]写成了province[province],花了半天时间才发现...

第二次写省市级联,onchange("selectPro()")中少写了(),通过webstormshift+f1可以直接查到,相见恨晚

qq_24068709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录