我应该如何使用Javascript处理这个html表单

我有几个问题需要帮助。我正在制作一个基本的订单模型。我想让它看起来像 我需要它遵循以下三个约束条件

单击“订单”按钮后，如果客户端未填写任何必填字段，则提供一条错误消息（请具体说明我的错误消息，指出哪个框出错）

单击“订单”按钮后，如果他们正确填写了所需信息，则提供另一条消息（“谢谢您，#firstname#lastname，您的订单。您的总金额为xxxxx美元”）

单击“清除”按钮清除表单上的框后，我需要能够通过编写自己的脚本来完成此操作

到目前为止，我几乎完成了布局。我有点困惑如何减少实际字段和表单图例边框之间的填充。 由于使用两种不同的表单来实现两者的边界，我在重置表单时也遇到了问题。这是通过文档调用两种表单的一种方法。getElementById（“myForm”&myForm1”）。reset（）我知道这是错误的，只是我觉得这是最简单的方法。我遇到的另一个问题是让我的函数检查它们是否是每个输入的响应，如果没有指定错误在哪里，然后如果没有错误，它通过乘以价格和数量报告总金额，然后说明它们的名字和姓氏。下面我将发布我的HTML、CSS和JS。如果有人能抽出时间帮助我，我将不胜感激。 ----修复了重置并使其调用两个窗体-----

要显示错误消息，请避免使用

警报

。这不是一个好办法。而是在消息中保留一些隐藏的文本，并根据用户的输入控制其可见性。比如：

请填写您的名字

在JS中：

if(field1.length == 0){
    document.getElementById('field1Error').style.display= 'block';
}
else{
    document.getElementById('field1Error').style.display= 'none';
}

var content= 'Thank you '+ field1.value+ ' '+ field2.value+ ' for your order. Your total is '+ 
    parseInt(field3.value)* parseInt(field4.value)+ '.'
document.getElementById('confirmMessage').innerHTML= content;

要显示确认信息，也可以使用上述方法。只需在JS中通过从字段中收集值来创建消息，并将其放入页面中已有的

div

在JS中：

if(field1.length == 0){
    document.getElementById('field1Error').style.display= 'block';
}
else{
    document.getElementById('field1Error').style.display= 'none';
}

var content= 'Thank you '+ field1.value+ ' '+ field2.value+ ' for your order. Your total is '+ 
    parseInt(field3.value)* parseInt(field4.value)+ '.'
document.getElementById('confirmMessage').innerHTML= content;

reset（）

工作正常。如果要更改此设置，则可以迭代表单的字段并手动清除它们

我希望这有帮助。如果您有任何疑问，请询问

编辑： 要显示组合警报，请使用标志跟踪有效和无效字段，并使用

if

而不是嵌套的

if-else if

块

所需更改：

function myFunction1()
{
  var field1 = document.getElementById("field1").value.trim();
  var field1Valid= true;
 var field2 = document.getElementById("field2").value.trim();
var field2Valid= true;
 var field3 = document.getElementById("field3").value.trim();
var field3Valid= true;
  var field4 = document.getElementById("field4").value.trim();
var field4Valid= true;
if ( field1.length == 0)
 {
        field1Valid= false;
 }
 if ( field2.length == 0)
 {
        field2Valid= false;
 }
 if ( field3.length == 0)
 {
        field3Valid= false;
 }
 if ( field4.length == 0)
 {
        field4Valid= false;
 }
var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false
if( !formValid){
    var alertMessage= 'Please fill ';
    if( !field1Valid){ alertMessage+= 'First Name'; }
    if( !field2Valid){ alertMessage+= 'Last Name'; }
    if( !field3Valid){ alertMessage+= 'Price'; }
    if( !field4Valid){ alertMessage+= 'Quantity'; }
    alert(alertMessage);
    return false;
}
else{
     var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is '+ String(parseInt(field3) * parseInt(field4) )+ '.';
    alert(alertMessage);
    return true;
}


}

---

您需要将JavaScript与HTML分开。您可能希望在客户端进行正则表达式匹配，然后再使用PHP等语言在服务器上进行验证。AJAX是一条出路。学习它。这可能不会在一夜之间发生，所以不要太沮丧。谢谢你的提醒，我把它分开了。我最近经常看到这种AJAX出现。我会研究一下。注意：标题

不应该出现在

中，请使用

代替。谢谢你刚刚意识到我这么做了。意思是把它放在头和身体之间。我会把它修好。我同意警报是传达信息的可怕方式。我试过你上面解释的方法，而且它更干净。但是，它们的方法是使用警报和嵌套语句。我使用它作为一个html类的学习方法。谢谢警报和嵌套语句是什么意思？请详细说明。如果说字段1未被占用，那么它会告诉您填写字段1，然后它会继续检查字段2，如果字段1已被填写，依此类推到最后。如果所有字段都已填写，那么它将转发一条消息，说明表单已完成或已提交。这就是我试图用上面的myFunction1（）解决的问题。谢谢，我想你的代码也一样。它检查字段1，如果未填充，则发出警报。检查字段2是否填写了字段1，并发出相同的警报。在您的方法中，我建议进行更改，即检查所有字段，而不考虑其他字段中的输入，并显示一个组合警报，以便用户一次就知道错误，而不是再次尝试提交表单并收到另一个字段为空的警报。最简单的方法是什么？他们的方法是只使用独立的“如果”语句，然后在检查了哪些语句已被填充后才打印出最终警报吗？

function myFunction1()
{
  var field1 = document.getElementById("field1").value.trim();
  var field1Valid= true;
 var field2 = document.getElementById("field2").value.trim();
var field2Valid= true;
 var field3 = document.getElementById("field3").value.trim();
var field3Valid= true;
  var field4 = document.getElementById("field4").value.trim();
var field4Valid= true;
if ( field1.length == 0)
 {
        field1Valid= false;
 }
 if ( field2.length == 0)
 {
        field2Valid= false;
 }
 if ( field3.length == 0)
 {
        field3Valid= false;
 }
 if ( field4.length == 0)
 {
        field4Valid= false;
 }
var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false
if( !formValid){
    var alertMessage= 'Please fill ';
    if( !field1Valid){ alertMessage+= 'First Name'; }
    if( !field2Valid){ alertMessage+= 'Last Name'; }
    if( !field3Valid){ alertMessage+= 'Price'; }
    if( !field4Valid){ alertMessage+= 'Quantity'; }
    alert(alertMessage);
    return false;
}
else{
     var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is '+ String(parseInt(field3) * parseInt(field4) )+ '.';
    alert(alertMessage);
    return true;
}


}