渡课学习第14天： JS 基础语法-困困

75 阅读 0 评论 50 点赞

我是靠谱客的博主专注向日葵，最近开发中收集的这篇文章主要介绍渡课学习第14天： JS 基础语法-困困，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今日学习概况

1.加深对 JS 基础语法部分理解

作业完成情况

1.完成今日上课代码 20 遍(到目前已完成7遍)
代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <form>
        <span style="color:red">*</span> 用户名：<input type="text" id="username" name="">&nbsp;<span id="usernameError" style="color:red"></span><br/>
        QQ：<input type="text" id="qq" name="">&nbsp;<span id="qqError" style="color:red"></span><br/>
        联系电话：<input type="text" id="tel" name="">&nbsp;<span id="telError" style="color:red"></span><br/>
        <input type="button" onclick="formReg();" name="" value="提交"><span id="resultSpan"></span>

    </form>
    <script type="text/javascript">

        // 用户验证表单数据是否合法的方法
        var formReg = function() {
            var flag = true; // 用作判断是否验证成功的标志位 默认是成功
            var errorMsg = "";

            // 通过验证表单元素，对flag进行设置值
            // 取出表单元素的值
            var username = document.getElementById("username").value;
            var qq = document.getElementById("qq").value;
            var tel = document.getElementById("tel").value;

            // username的逻辑：不能为空，而且不能超过6个字符长度
            if (username.trim() == "" || username.trim().length > 6) {
                flag = false;
                document.getElementById("usernameError").innerHTML = "用户名为空或者字符超过6个";
            } else {
                document.getElementById("usernameError").innerHTML = "";
            }

            if (qq.trim() != "" && isNaN(qq)) {
                flag = false;
                document.getElementById("qqError").innerHTML = "QQ号必须为数字";
            } else {
                document.getElementById("qqError").innerHTML = "";
            }


            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (tel.trim() != "" && !myreg.test(tel)) {
        flag = false;
                document.getElementById("telError").innerHTML = "手机号不合法";
            } else {
                document.getElementById("telError").innerHTML = "";
            }


            // 判断flag的值进行业务处理
            if (flag) {
                document.getElementById("resultSpan").innerHTML = "验证成功";
                document.getElementById("resultSpan").style.color = "green";
            } else {
                document.getElementById("resultSpan").innerHTML = "验证失败";
                document.getElementById("resultSpan").style.color = "red";
            }

        }


    </script>
</body>
</html>