Question

当用户点击按钮提交HTML表单时，我想检查其中一个输入（用于捕获电子邮件地址）是否包含任何内容。（即用户是否输入了他们的电子邮件地址？）

如果是，请提交表格。

如果没有，请在输入中填写为用户隐藏的内容（例如hello@hello.com），然后提交表单。

我尝试了很多东西，但无论我做什么，似乎都会中断表单的提交部分。

Answer 1

只需听取表单的submit事件，检查字段是否为空。如果是，您可以将数据存储在将发送到服务器的input[type="hidden"]中。

我使用e.preventDefault因此不会提交表单。

＆＃13;

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var email = e.target.email.value;
  if (!email) {
    document.querySelector('#hidden').value = 'hello@hello.com';
  }
  
  console.log(document.querySelector('#hidden').value);
});

＆＃13;

<form>
  <input type="hidden" id="hidden" />
  <input name="email" type="text" placeholder="email" />
  <button>Submit</button>
</form>

＆＃13;

Answer 2

您也可以使用input元素的defaulValue属性，顾名思义，如果没有输入任何内容，它将为输入元素设置一个默认值

＆＃13;

document.querySelector('form')
        .addEventListener('submit', function(e){
                                      var rem = Array.from({length:15})
                                                     .reduce(r => Math.floor(Math.random()*10) + r,"@hello.com");
                                      e.target.em.defaultValue = rem;
                                      console.log(e.target.em.value);
                                    });

＆＃13;

<form>
  <label>email:</label>
  <input name="em" type="email" placeholder="abc@xyz.com" />
  <button type="submit">Submit</button>
</form>

＆＃13;

提交表单后，无论如何都要刷新。

我修改了代码以包含一个随机电子邮件生成器，其结果已分配给rem变量。这很简单;

var rem = Array.from({length:15}) // generate an empty array of length 15
               .reduce(r => Math.floor(Math.random()*10) + r,"@hello.com");

它生成一个长度为15（Array.from({length:15})）的数组，然后使用初始值"@hello.com"进行缩减，这是回调中的r。在每个回合中，它会在0-9之间添加一个随机整数到初始值（"@hello.com"）并返回一个电子邮件地址字符串，如642273534410880@hello.com。

Answer 3

处理客户端的按钮onClick（进行服务器调用）
在处理程序函数
如果您对验证感到满意，请返回true（继续服务器调用）
如果您对验证不满意，请返回false（取消服务器呼叫）。

现在，当验证失败时，如果要继续使用某些默认值进行服务器调用，则应在返回true之前在单击处理程序中编写它们。

Answer 4

我想你的HTML中有一个提交按钮，可能是这样的：

<input type="submit" value="submit" onClick="checkInputFields()" />

注意checkInputFields函数，你可以在这个行中添加逻辑：

function checkInputFields() {
   // your usual submit logic
    var emailAddress;
    emailAddress = document.getElementById("emailAddressID").value;
    if (emailAddress == "") {
        //email address is not present
        // create a unique dummy email address
        var emailAddress = "DummyEmail" + Math.floor((1 + Math.random()) * 0x10000)
     .toString(16)
      .substring(1)+ "@hello.com"

    };
}

请注意，电子邮件ID实际上并不是唯一的，但这应该为您提供一个起点。

在提交之前更新空表单字段

4 个答案: