渡课课堂总结（7.31）

最新推荐文章于 2022-07-31 22:57:41 发布

HACKER6666

最新推荐文章于 2022-07-31 22:57:41 发布

阅读量109

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/weixin_42623761/article/details/81319832

版权

学习总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

今日学习内容

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

练习代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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>

学习感悟

不理解不要紧，多看看多敲敲把心态放好，总有一天会明白的。

骆驼走得慢，但终能走到目的地。

HACKER6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渡课课堂总结（7.31）

今日学习内容通过学习表单验证实例，加深对 JS 基础语法部分理解练习代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt;
复制链接

扫一扫