Fatal编程技术网
  • javascript/
  • Javascript 使代码简短&；表单验证

Javascript 使代码简短&；表单验证

javascript html

Javascript 使代码简短&；表单验证,javascript,html,Javascript,Html,我已经写了一个简单的代码 <!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin-top: 0; } input{ margin-top: 10px; } #nameInput{ width: 250px; margin-left: 60px;

我已经写了一个简单的代码

<!DOCTYPE html>

<html>
<head>

    <style type="text/css">
    body{
        margin-top: 0;
    }

    input{
        margin-top: 10px;
    }
    #nameInput{
        width: 250px;
        margin-left: 60px;

    }
    #ageInput{
        width: 70px;
        margin-left: 71px;
    }
    #emailInput{
        width: 250px;
        margin-left: 60px;
    }
    #dateInput{
        margin-left: 9px;
    }
    #myButton{
        margin-top: 10px;
        margin-left: 100px;
    }
    #yourData{
        margin-top: 100px;
        font-weight: bold;
    }

    #dataDetails, td, th{
        border: 1px solid black;
        border-collapse: collapse;
    }

    #dataDetails{
        width: 50%;
        text-align: center;
    }
    #warning{
        font-weight: bold;
        margin-top: 20px;
        color: red;
    }

    </style>

</head>
<body>

<form>
Name <input type = "text" id="nameInput" required /><br>
Age <input type = "number" id="ageInput" required /><br>
Email <input type = "email" id="emailInput" required /><br>
Joinging Date <input type = "date" id = "dateInput" required />
</form>
<button id="myButton">Submit</button>
<p id="yourData"></p>
<table id="dataDetails"></table>
<p id="warning"></p>

<script>

    var name = document.getElementById("nameInput").value;
    var age = document.getElementById("ageInput").value;
    var email = document.getElementById("emailInput").value;
    var join = document.getElementById("dateInput").value;
    var tableRow = "";

    function myFunction(){

        tableRow = tableRow + "<tr>";
        tableRow = tableRow + "<th>" + "Your Name" + "</th>";
        tableRow = tableRow + "<th>" + "Your Age" + "</th>";
        tableRow = tableRow + "<th>" + "Your Email" + "</th>";
        tableRow = tableRow + "<th>" + "Your Joining Date" + "</th>";
        tableRow = tableRow + "</tr>";

        tableRow = tableRow + "<tr>";
        tableRow = tableRow + "<td>" + name + "</td>";
        tableRow = tableRow + "<td>" + age + "</td>";
        tableRow = tableRow + "<td>" + email + "</td>";
        tableRow = tableRow + "<td>" + join + "</td>";


    tableRow = tableRow + "</tr>";
    return tableRow;
}

    var click = 0;


    document.getElementById("myButton").onclick = function(){
        click = click + 1;

        if (click==1) {
        document.getElementById("yourData").innerHTML = "Here is your filled data";
        document.getElementById("dataDetails").innerHTML = myFunction();
    } else {
        document.getElementById("warning").innerHTML = "Details have already been added";
    }
    }

</script>

</body>
</html>


身体{
边际上限：0；
}
输入{
边缘顶部：10px；
}
#名称输入{
宽度：250px；
左边距：60像素；
}
#年龄输入{
宽度：70px；
左边距：71px；
}
#电子邮件输入{
宽度：250px；
左边距：60像素；
}
#日期输入{
左边距：9px；
}
#我的按钮{
边缘顶部：10px；
左边距：100px；
}
#你的数据{
边缘顶部：100px；
字体大小：粗体；
}
#数据详情，td，th{
边框：1px纯黑；
边界塌陷：塌陷；
}
#数据详细信息{
宽度：50%；
文本对齐：居中；
}
#警告{
字体大小：粗体；
边缘顶部：20px；
颜色：红色；
}
名称

年龄

电子邮件

合并日期
提交




var name=document.getElementById（“nameInput”）.value；
var age=document.getElementById（“ageInput”）.value；
var email=document.getElementById（“emailInput”）.value；
var join=document.getElementById（“dateInput”）.value；
var tableRow=“”；
函数myFunction（）{
tableRow=tableRow+“”；
tableRow=tableRow++“您的名字”+”；
tableRow=tableRow++“您的年龄”+”；
tableRow=tableRow++“您的电子邮件”+”；
tableRow=tableRow++“您的加入日期”+”；
tableRow=tableRow+“”；
tableRow=tableRow+“”；
tableRow=tableRow+“”+名称+“”；
tableRow=tableRow+“”+年龄+“”；
tableRow=tableRow+“”+电子邮件+“”；
tableRow=tableRow+“”+加入+“”；
tableRow=tableRow+“”；
返回表行；
}
var-click=0；
document.getElementById（“myButton”）.onclick=function（）{
单击=单击+1；
如果（单击==1）{
document.getElementById（“yourData”）.innerHTML=“这是您填写的数据”；
document.getElementById（“dataDetails”）.innerHTML=myFunction（）；
}否则{
document.getElementById（“警告”）.innerHTML=“已添加详细信息”；
}
}
它工作得很好，但是HTML5验证没有正常工作。如果我不填写它们，它们不会给出任何警告&对于输入错误的字段也会发生同样的情况，只是将其变成红色。它将使表没有任何细节。我如何用HTML5修复它

另外，我想知道我是否可以做一些简短的代码。我的意思是，对于两行，我必须使用tr标记两次。我可以为它做任何循环并在其中放入不同的数据吗。我试过了，但问题是它插入相同的数据两次。请帮忙

你有这个：

<form>
...
</form>
<button id="myButton">Submit</button>


...
提交
您的提交按钮在表单之外

将提交按钮放在表单中

<form>
Name <input type = "text" id="nameInput" required /><br>
Age <input type = "number" id="ageInput" required /><br>
Email <input type = "email" id="emailInput" required /><br>
Joinging Date <input type = "date" id = "dateInput" required />
<button id="myButton">Submit</button>
</form>


名称

年龄

电子邮件

合并日期
提交
请参见

我希望每次单击时都会复制该表。另请注意：表单输入元素验证也必须在服务器端（在脚本中）进行验证/筛选/检查，以防止SQL注入或垃圾邮件！谢谢大家的建议。好吧，让我来！，你是对的，所以我放了一个if-else语句来防止复制表。另外，你应该把javascript变量放在
myFunction（）
Hi！若我把按钮放在表单标签中，那个么创建的表将立即消失。请检查一下。如何防止呢？你可以把
返回false内部onclick以防止表单post