如何防止用户在电子邮件输入字段中添加空格？ [关闭]答案

【问题标题】：How to prevent user from adding spaces in email input field? [closed]如何防止用户在电子邮件输入字段中添加空格？ [关闭]
【发布时间】：2019-08-09 01:50:12
【问题描述】：

我有一个表格，允许用户提供名字和姓氏、电子邮件和部门。该表单是用jsp编写的，我想修改电子邮件输入字段，使其不允许用户在输入电子邮件时添加任何空格（即，如果他们尝试添加空格，当然课程将保留在最开始并且也不会允许输入电子邮件后的空格）。

我正在浏览 Google 以查找解决方案，发现它非常简单，使用 javaScript 和 jQuery，但不幸的是，我对它的了解不多，因为我大部分时间都是用 java 编写代码。

这是我的jsp表单中的代码sn-p

<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>

我想知道有没有办法通过只使用jsp或结合jsp、js和jQuery来防止用户在电子邮件字段中添加空格？

【问题讨论】：

标签： javascript java jsp

【解决方案1】：

您可以尝试将类型属性添加到电子邮件输入和必需

<input type="email" required>

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

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

【讨论】：

这不会阻止输入space 字符，但会提交表单。
document.querySelector("form").onsubmit = function (event) { var email = document.getElementById("inputemail").value; if (email.indexOf(" ") != -1){ event.preventDefault(); alert("Not allow space"); }else{ //go! } }

【解决方案2】：

您基本上希望在提交表单或用户在字段中输入时拥有事件侦听器。我选择了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 = ""
    }
  })

}

https://codepen.io/dmc2015/pen/VodWJQ?editors=1111

【讨论】：

【解决方案3】：

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

为了避免用户在电子邮件输入字段中输入任何空格，您可以将input 标签type 属性更改为值email。使用此类型值，输入值将自动验证以确保它是格式正确的电子邮件地址。

例如<input type="email" name="emailaddress">

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

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

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.
}

您可以考虑将.trim() 或.replaceAll(" ", "") 用于提交的电子邮件字符串以忽略提交的空白。

【讨论】：