正则表达式，Javascript中的长度检查

Question

我现在想验证我的表单，我写了一些代码，它非常适合长度限制，但我想使用正则表达式来过滤每个元素的值。

我从论坛中找到了这些正则表达式：

• 全名：var regex = /^[a-zA-Z ]$/;

• 电话：var regexPhone= /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;

我猜 HTML5 (input:type email) 足以用于电子邮件验证

我也想用名字来做这个，当我输入全名时，第一个字母变成大写字母。例如--> input="john smith"，改为“John Smith”。

这是我的代码：

function validateForm() {
for (var i = 0; i < document.forms[0].elements.length; i++) {
    var pedio = document.forms[0].elements[i];
	if(pedio.id.indexOf("Name")!=-1){
		if (pedio.value.length < 5 || pedio.value.length > 35) {
			alert("Full Name must be 5-35 character long");
            pedio.focus();
            pedio.style.backgroundColor = "#997379";
            return false;
		}
	}
	
    if ((pedio.id.indexOf("Phone") != -1) && (isNaN(pedio.value))) {
        alert("Phone is must contain only numbers");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
    }
	
	if(pedio.id.indexOf("Phone")!=-1){
		if (pedio.value.length!=10) {
			alert("Phone must be 10 numbers");
            pedio.focus();
            pedio.style.backgroundColor = "#997379";
            return false;
			}
		}
	}
}

/* No CSS */

<h1 class="Title">Sign Up</h1>
<div>
	<form method="post" onsubmit="return validateForm()">
		<input type="text" id="Name" name="yourname" placeholder="*Full Name" autocomplete="off" required>
		<input type="email" id="Email" name="youremail" placeholder="*E-Mail"autocomplete="off" required>
		<input type="tel" id="Phone" name="yourphone" placeholder="*Phone" autocomplete="off" required>
		<input type="password" id="Password" name="yourpassword" placeholder="*Password" autocomplete="off" required>
		<p class="signup"> The fields with * are required!<br>
		-If you have an account, <a class="signup" href="reservation.php">log in</a> now-</p>

		<keygen name="security" style="display:none;">
		<input type="submit" value="Register">

    </form>
</div>

Answer 1

选项 1：您可以使用 text-transform: capitalize CSS 属性，它会自动完成将名称从 john cena 转换为 John Cena 的任务。

在 CSS 中检查下面的示例

选项 2： 我添加了一个名为 Nick name 的新输入，它使用 javascript 来执行相同的任务。

我已经使用keyup 处理程序来捕获所有按键输入事件，以便我们可以执行一段代码来完成名称大写的工作。

结果是简单的字符串操作，将名称与<space-character> 分开，并将第一个字符转换为大写，然后与字符串的其余部分连接。

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector("#NickName").addEventListener("keyup", capitalizeName);
});

function capitalizeName() {
  if (!this.value) return;
  var aNewName = this.value.split(" ").map(function(name) {
    return name.charAt(0).toUpperCase() + name.substring(1);
  });
  this.value = aNewName.join(" ");
}

function validateForm() {
  for (var i = 0; i < document.forms[0].elements.length; i++) {
    var pedio = document.forms[0].elements[i];
    if (pedio.id.indexOf("Name") != -1) {
      if (pedio.value.length < 5 || pedio.value.length > 35) {
        alert("Full Name must be 5-35 character long");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
      }
    }

    if ((pedio.id.indexOf("Phone") != -1) && (isNaN(pedio.value))) {
      alert("Phone is must contain only numbers");
      pedio.focus();
      pedio.style.backgroundColor = "#997379";
      return false;
    }

    if (pedio.id.indexOf("Phone") != -1) {
      if (pedio.value.length != 10) {
        alert("Phone must be 10 numbers");
        pedio.focus();
        pedio.style.backgroundColor = "#997379";
        return false;
      }
    }
  }
}

/* No CSS */

#Name {
  text-transform: capitalize;
}

<h1 class="Title">Sign Up</h1>
<div>
  <form method="post" onsubmit="return validateForm()">
    <input type="text" id="Name" name="yourname" placeholder="*Full Name" autocomplete="off" required>
    <input type="text" id="NickName" name="NickName" placeholder="*Nick name" autocomplete="off" required>
    <input type="email" id="Email" name="youremail" placeholder="*E-Mail" autocomplete="off" required>
    <input type="tel" id="Phone" name="yourphone" placeholder="*Phone" autocomplete="off" required>
    <input type="password" id="Password" name="yourpassword" placeholder="*Password" autocomplete="off" required>
    <p class="signup"> The fields with * are required!<br> -If you have an account, <a class="signup" href="reservation.php">log in</a> now-</p>

    <keygen name="security" style="display:none;">
    <input type="submit" value="Register">

  </form>
</div>

Answer 2

提示：

RegExp 对象有一个方法test，当给定字符串参数时，如果str 中至少有一个匹配项，则返回true 或false。 MDN Documentation

用作/regexp/.test(str)。您已经有了测试长度的代码。你想测试这个正则表达式的长度和。

当您想将每个单词的首字母大写时，称为Title Case。 here 对您的这部分问题有一个很好的回答