学习内容

通过老师讲解学习表单验证实例，加深对 JS 基础语法部分理解；

今天学习的代码

<!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;
                errorMsg += "QQ号必须为数字|";
            }

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


            // 判断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>

学习总结

今日学习了表单验证的代码，进过一下午的反复敲击，对这段代码大概有所了解。但是还是要多加练习才行。

渡课学习第二十三天

学习内容

今天学习的代码

学习总结

猜你喜欢