Javascript：减少输入字段表单验证的空间

好的，我需要基本实现五件事情 - 使用JS而不是jQuery。我在这里尝试了几个RegExp代码，但都没有为我工作。让我先从第一个问题（1号）：Javascript：减少输入字段表单验证的空间

在“username”的输入字段删除多余的空间（允许即只有空间是姓和名之间）

function removeSpaces(str){ 
 
\t \t return str.replace(/^\s+/,"").replace(/\s+$/,"").replace(/\s+/g," "); 
 
}

<html> 
 
<body> 
 
<form action="" method="post" name="myform" onsubmit="removeSpaces(this)"> 
 
\t \t \t \t \t \t \t <div id="nameDiv"> 
 
\t \t \t \t \t \t \t \t \t \t \t <label for="user_login">User login</label> 
 
\t \t \t \t \t \t \t \t \t \t \t <input id="userName" type="text" name="user_login" value=""> \t 
 
\t \t \t \t \t \t \t </div> 
 
       
 
       <div id="submitButton"> \t 
 
\t \t \t \t \t \t \t \t \t \t \t <input type="submit" value="Submit" name="" onclick="validateForm(), removeSpaces(), firstLetterCaps()"> 
 
\t \t \t \t \t \t \t </div> 
 
       
 
</body> 
 
</html>

用户必须输入至少两个名字，即第一个和最后名字

大写˚F每个名称的第一个字母（点击提交按钮时应该发生）

计算注释中用户类型的行数 - 如果行数小于10，则指示符（非文本）为绿色，否则为红色。

应显示适当的隐藏errorMessage div，而不是警报JS窗口。例如：当用户没有输入名称并点击提交时，errorMessageName div应该出现。

对于1号，我试过，但它不工作：

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript"> 
 

 
\t \t function removeSpaces(nameInput){ 
 
    \t \t var nameInput = document.getElementById("userName").value; 
 
    \t \t return nameInput.replace(/ +(?=)/g,''); 
 
    } 
 

 
\t </script> 
 
</head> 
 
<body> 
 
\t <div id="nameDiv" style="border: 1px solid red; text-align: center;"> 
 

 
\t \t <label for="user_login">User login</label> 
 
\t \t <input id="userName" type="text" name="" value="" required="" onblur="capitalizeFirstLetter(); removeSpaces()"> 
 
\t </div> 
 
</body> 
 
</html>

任何帮助就这将是非常感谢！

来源

2017-10-09 Neo

你是什么意思'在 “username” 的删除多余的空格一切'？如果用户输入5个字怎么办？ –

我可以给你一些简单的正则表达式来用于1）和2），但是你需要考虑规范化人名是否真的是你想要的。它应该如何处理“Pedro da Silva”（其姓氏不是首字母大写）或“Jean Michel Dar”（带有两个单词的名字）或“John O'Reilly”（带有另一个非标准大写字母）或在哪里姓氏是第一位的。 –

你这样做都是错误的。这是复杂的验证，不能很好地处理复杂的名称，如：Edvin van der Sar等。此外，它的多种事情不是一个简单的问题。将名字拆分成2或3个部分（姓名中间名）。不要大写任何东西，只要在1个或更多名字以小写字母开头的情况下警告用户。在名称之前修饰空格，但不限制有多少单词，有些人的姓氏多于一个或多个名字。 – DanteTheSmith

试试这个：

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript"> 
 
<!-- 
 
function checkAndFormat(nameInput){ 
 
    var el = document.getElementById("userName"); 
 

 
    if (typeof el != "object") { 
 
     alert("Cannot find element called 'userName'!"); 
 
     return; 
 
    } 
 
    var nameInput = el.value; 
 

 
    if(typeof nameInput == "string") { 
 
     var aryParts = nameInput.split(" "), strFirst, strLast; 
 

 
     for(var i in aryParts) { 
 
     var strTerm = aryParts[i].trim(); 
 

 
     if (strTerm.length == 0) { 
 
      continue; 
 
     }   
 
     strTerm = strTerm.toLowerCase(); 
 
     strTerm = strTerm.substr(0,1).toUpperCase() + strTerm.substr(1); 
 

 
     if (strFirst == undefined) { 
 
      strFirst = strTerm; 
 
     } else if (strLast == undefined) { 
 
      strLast = strTerm; 
 
     } 
 
     } 
 
     if (typeof strFirst == "string" && typeof strLast == "string") { 
 
     el.value = strFirst + " " + strLast; 
 
     return; 
 
     } 
 
    } 
 
    throw("Please enter first name and last name!"); 
 
} 
 
// --> 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <div id="nameDiv" style="border: 1px solid red; text-align: center;"> 
 

 
\t \t <label for="user_login">User login</label> 
 
\t \t <input id="userName" type="text" name="" value="" required="" onblur="checkAndFormat();"> 
 
\t </div> 
 
</body> 
 
</html>

来源

2017-10-09 11:59:56 SPlatten

感谢您的输入，但肯定必须有一个更简单的JS代码。这看起来很复杂。 – Neo

也许，但这是健壮的，不会崩溃，它的可读性！ – SPlatten

function onSubmit(element) { 
 
errorElement = document.getElementById("error"); 
 
errorElement.innerHTML = ""; 
 
elements = element.querySelectorAll("label > input, label > textarea"); 
 
words = elements[0].value.match(/\S+/g) || []; 
 
if(words.length < 2) { 
 
    document.getElementById("error").innerHTML += "<br>Name must be at least 2 words." 
 
    return false; 
 
} 
 
words = words.map(function(word) { 
 
return word[0].toUpperCase() + word.substr(1); 
 
}); 
 
elements[0].value = words.join(" "); 
 
} 
 

 
function onUpdate(element) { 
 
}

div#error { 
 
    color: red; 
 
}

<form onsubmit="return onSubmit(this);"> 
 
<label>Name:<br><input type="text" name="userName"/></label> 
 
<br><br> 
 
<label>Comments:<br><textarea name="comment" onchange="onUpdate"></textarea></label> 
 
<br><br> 
 
<input type="submit"/> 
 
</form> 
 
<div id="error"></div>

了，但4

来源

2017-10-09 12:57:09

Javascript：减少输入字段表单验证的空间

回答

相关问题