Javascript 如何防止用户在电子邮件输入字段中添加空格？

我有一个表格，允许用户提供名字和姓氏，电子邮件和部门。表单是用jsp编写的，我想修改电子邮件输入字段，这样用户在输入电子邮件时就不允许添加任何空格（即，如果他们试图添加空格，courser将保留在最开始的位置，并且在输入电子邮件后也不允许添加空格）

我在浏览Google以找到解决方案，发现使用javaScript和jQuery非常简单，但不幸的是，我没有太多关于它的知识，因为大部分时间我都用java编写代码

下面是我的jsp表单中的代码片段

<div class="formFields">
   <div class="formFieldsTop">
  <input type="hidden" name="CSRF_TOKEN" value="<%= pageBean.getCsrfToken()%>">
    <label id="firstNameTxt" class="boldText">First Name</label>
    <input class="requiredInput subUserFirstNameInput"  name="firstName"  type="textfield" size="30" maxlength="15" autocomplete="off" value="<%= NullSafe.subst(EcommerceFormat.escapeHtmlSafeString(delegateInfo.getFirstName()))%>">
    <label id="lastNameTxt" class="boldText">Last Name</label>
    <input class="requiredInput"  name="lastName" id="subUserLastNameInput" autocomplete="off" type="textfield" size="30" maxlength ="20" autocomplete="off" value="<%= NullSafe.subst(EcommerceFormat.escapeHtmlSafeString(delegateInfo.getLastName()))%>">
    <label id="emailTxt"><span class="boldText">Email Address*</span> (ex: email@yoursite.com)</label>
    <input class="requiredInput subUserEmailInput"  name="email" id="subUserEmailInput" type="textfield" size="30" autocomplete="off" maxlength="50" value="<%= NullSafe.subst(EcommerceFormat.escapeHtmlSafeString(delegateInfo.getEmailAddress()))%>">
    <label id="departmentTxt"><span class="bold">Department/Relationship</span> (optional)</label>
    <input name="department" type="textfield" size="30" autocomplete="off" maxlength="100" value="<%= NullSafe.subst(EcommerceFormat.escapeHtmlSafeString(delegateInfo.getDepartmentCode()))%>">
  </div>
</div>           

名字
姓
电子邮件地址*（例如：email@yoursite.com)
部门/关系（可选）

---

我想知道是否有一种方法可以防止用户仅使用jsp或结合使用jsp、js和jQuery在电子邮件字段中添加空格？

您基本上希望在表单提交时或用户在字段中键入时使用事件侦听器。我选择了

keyup

，因为这不是您提供的实际表单。如果电子邮件的输入字段有一个

“

，则您希望通知用户并拒绝提交表单

window.onload = function () {

  var emailField = document.getElementById("subUserEmailInput")

  emailField.addEventListener("keyup", function(evt){
    if (emailField.value.includes(" ") ) {
      //evt.preventDefault() you would want this if you were doing a submit to prevent it from happening
      emailField.style.border = "solid red 2px"
      alert("no spaces are allowed in your e-mail")
    } else {
      emailField.style.border = ""
    }
  })

}

---

您可以尝试将type属性添加到电子邮件输入中，并且是必需的

<input type="email" required>

或者将模式属性添加到电子邮件输入

<input pattern="[a-z\._\d]{1,}@[a-z0-9]{2,}\.[a-z0-9]{2,}" required>

---

不确定这是否是您正在寻找的正确解决方案，但这是确保电子邮件输入格式正确（无空格）的简单方法之一

为了避免用户为电子邮件输入字段输入任何空白，您可以将您的

input

标记

type

属性更改为值

email

。使用此类型值，将自动验证输入值，以确保它是格式正确的电子邮件地址

e、 g.

但是，这只是前端验证。提交数据时，仍然需要执行一些验证工作（以避免用户在浏览器上使用F12代码检查来更改HTML代码）

以下是验证字符串是否为电子邮件的代码（使用JAVA）：

---

你可以考虑放“<代码> .Time[”/代码>或<代码>。对提交的电子邮件字符串重新放置“全部”（“”，“”“”/<代码>以忽略所提交的空白。

这不会阻止键入<代码>空间< /代码>字符，但提交表单。<代码>文档> QuestS选择器（“窗体”）.OnStase=函数（事件）{var email=document.getElementById（“inputemail”）.value；if（email.indexOf（“”！=-1）{event.preventDefault（）；alert（“不允许空间”）；}else{//go！}

String email ="xxxx@xxx.com"
Pattern p = Pattern.compile(".+@.+\\.[a-z]+");
Matcher m = p.matcher(email);
boolean matchFound = m.matches();
if (matchFound) {
    //execute code block, when input is email.
}