javascript反思

最新推荐文章于 2022-08-11 17:31:04 发布

huakaiba

最新推荐文章于 2022-08-11 17:31:04 发布

阅读量275

点赞数

分类专栏：学习笔记经典错题

本文链接：https://blog.csdn.net/huakaiba/article/details/89574938

版权

学习笔记同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

经典错题

1 篇文章 0 订阅

订阅专栏

今天要求完成的很慢，主要原因还是javascript代码不熟练

几个耽误时间的主要错误如下：

1、弹框函数式alert，自己没有按照提示，自己敲错成alter，所以一直没弹出来，自己也没用前端F12的查看元素进行排查问题

2、js代码写在html的body上面，但是并没写window.onload，搞得页面元素没有加载的情况下，绑定元素的函数自然无法执行

3、正则表达式自己不懂就百度别人写好的，不浪费时间

4、已有的代码记得复用，这样才能提高开发效率

5、前段的时间控件传的参数也是字符串，javabean中也可以设为String类型，数据库字段可以设置成date类型

<%--
  Created by IntelliJ IDEA.
  User: NewBoy
  Date: 2018/4/17
  Time: 16:40
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加书籍</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

            window.onload=function () {

                var btn_sub = document.getElementById("btn_sub");
                btn_sub.onclick = function () {
                    var flag = checkUsername() && checkAuthor() && checkTime() && checkType()
                    if(!flag){
                        alert("资料填写有误，请检查")
                    }
                    return flag
                }




                flag = false;
                if(${requestScope.msg!=null}){
                    flag=true;
                }

                if(flag){
                    alert("添加成功")
                    flag = false
                }

                /*检测书名不为空*/
                document.getElementById("name").onblur=checkUsername

                function checkUsername() {

                    var reg = /^[\s\S]*.*[^\s][\s\S]*$/;
                    var flagname = reg.test(document.getElementById('name').value);
                    if(flagname){

                    }else{
                        alert("书籍名不能为空")
                    }
                    return flagname

                }

                /*检测作者不为空*/

                document.getElementById("author").onblur=checkAuthor

                function checkAuthor() {

                    var reg = /^[\s\S]*.*[^\s][\s\S]*$/;
                    var flag = reg.test(document.getElementById('author').value);
                    if(flag){

                    }else{
                        alert("作者不能为空")
                    }
                    return flag

                }


                /*检测日期*/
                document.getElementById("time").onblur=checkTime
                function checkTime() {

                    var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/
                    var flag = reg.test(document.getElementById('time').value);
                    if(flag){

                    }else{
                        alert("日期格式不正确")
                    }
                    return flag

                }


                document.getElementById("type").onblur=checkType
                function checkType() {

                    var reg = /^0$/;
                    var flag = reg.test(document.getElementById('type').value);
                    if(flag){
                        alert("请选择书籍类型")
                    }else{

                    }
                    return !flag

                }

            }







    </script>
    

</head>
<body>
<div class="container" style="max-width: 400px">
    <h2>添加书籍</h2>
    <form action="addBookServlet">
        <div class="form-group">
            <label for="name">图书名称</label>
            <input type="text" name="name" id="name" class="form-control" placeholder="请输入书籍名称"/>
        </div>
        <div class="form-group">
            <label for="name">图书作者</label>
            <input type="text" name="author" id="author" class="form-control" placeholder="请输入作者"/>
        </div>
        <div class="form-group">
            <label for="name">购买日期</label>
            <input type="date" name="time" id="time"  class="form-control" placeholder="请输入购买日期"/>
        </div>
        <div class="form-group">
            <label for="name">图书类别</label>
            <select name="type" id="type" class="form-control">
                <option value="0">--请选择--</option>
                <option value="1">计算机/软件</option>
                <option value="2">小说文摘</option>
                <option value="3">杂项</option>
               
            </select>
        </div>
        <div style="text-align: center;">
            <input type="submit" value="增加图书" class="btn btn-success" id="btn_sub"/>
        </div>
    </form>
</div>

</body>
</html>

huakaiba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript反思

今天要求完成的很慢，主要原因还是javascript代码不熟练几个耽误时间的主要错误如下：1、弹框函数式alert，自己没有按照提示，自己敲错成alter，所以一直没弹出来，自己也没用前端F12的查看元素进行排查问题2、js代码写在html的body上面，但是并没写window.onload，搞得页面元素没有加载的情况下，绑定元素的函数自然无法执行3、正则表达式自己不懂就百度别人写...
复制链接

扫一扫