渡课学习日记7.31

最新推荐文章于 2022-07-31 09:44:24 发布

desonly_forest

最新推荐文章于 2022-07-31 09:44:24 发布

阅读量113

点赞数

分类专栏：学习日记

本文链接：https://blog.csdn.net/desonly_forest/article/details/81320273

版权

学习日记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、学习内容

表单验证用户信息的JavaScript代码的编写

二、学习时间安排

下午1:30~2:30理解代码中的内容，理清楚思路，将一些没见过的基础语法API了解了一下；
2:30~5:00今日代码的多次敲打，熟能生巧；
5:00~5:30思维导图的完善；
7:00~7:30今日博客编写；
7:30~8:30今日内容回顾；

三、验证表单数据JavaScript

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<form>
    <span style="color: red;">*</span>用户名：<input type="text" id="username" name="">&nbsp;<span id="usernameError" style="color: red"></span><br><br>
    QQ:<input type="text" id="qq" name="" size="26px">&nbsp;<span id="qqError" style="color: red"></span><br><br>
    Tel:<input type="text" id="tel" name="" size="25px">&nbsp;<span id="telError" style="color: red"></span><br><br>
    <input type="button" onclick="formReg()" name="" value="提交">&nbsp;<span id="resultSpan" style="color: red"></span>
</form>



<script type="text/javascript">
    var formReg = function() {
        var flag = true;
        var errorMsg = "";

        var username = document.getElementById("username").value;
        var qq = document.getElementById("qq").value;
        var tel = document.getElementById("tel").value;

        //username的逻辑：不能为空，而且不能超过六个字符长度
        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号码必须为数字|";
            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;
            // errorMsg += "手机号不合法！|";
            document.getElementById("telError").innerHTML = "手机号不合法！";
        }else {
            document.getElementById("telError").innerHTML = "";
        }




        if(flag) {
            // alert("验证成功");
            document.getElementById("resultSpan").innerHTML = "验证成功";
            document.getElementById("resultSpan").style.color = "green";
        }else {
            document.getElementById("resultSpan").innerHTML = "验证失败";
            document.getElementById("resultSpan").style.color = "red";
        }
    }
</script>
</body>
</html>

四、学习心得

JavaScript表单验证用户数据的思路为

写出HTML代码，完成相信格式
在button中定义一个触发事件
定义事件函数和相应的变量
通过变量判断（if（flag=ture））打印相应的语句
想要通过JavaScript写出一件事情，思路很重，还有相应的语法知识也很重要，绝大部分功能都有API，我们可以通过调用来实现，但是前提我们一定要掌握好基础的语法。

desonly_forest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渡课学习日记7.31

一、学习内容表单验证用户信息的JavaScript代码的编写二、学习时间安排下午1:30~2:30理解代码中的内容，理清楚思路，将一些没见过的基础语法API了解了一下； 2:30~5:00今日代码的多次敲打，熟能生巧； 5:00~5:30思维导图的完善； 7:00~7:30今日博客编写； 7:30~8:30今日内容回顾；三、验证表单数据JavaScript...
复制链接

扫一扫