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：減少輸入字段表單驗證的空間

回答

相關問題