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（输入：类型电子邮件）足以进行电子邮件验证

另外我想用名字来做这个，当我输入全名时，第一个字母会变为大写字母。例如 - ＆gt;输入=＆＃34;约翰史密斯＆＃34;，更改为＆＃34;约翰史密斯＆＃34;。

这是我的代码：

＆＃13;

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

＆＃13;

/* No CSS */

＆＃13;

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

＆＃13;

Answer 1

提示：

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

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

如果要将每个单词的第一个字母大写，则称为Title Case。对于那部分问题，有一个很好的答案here

Answer 2

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

正则表达式，长度检查Javascript

2 个答案: