极客教程JavaScript 如何使用正则表达式验证表单
JavaScript是一种脚本编程语言，也有助于验证用户的信息。你听说过验证表单吗？这里介绍JavaScript，这是一种用于验证和验证的脚本语言。为了更深入地了解这个主题，让我们通过实例来理解。
表单验证： 表单验证是在表单提交过程中验证最终用户输入的值。为了验证一个表单，正则表达式起着至关重要的作用。让我们看看正则表达式是什么意思。
正则表达式： 正则表达式是一个描述字符模式的对象。正则表达式用于在文本上执行模式匹配和搜索替换功能。因此，在这个领域中，JavaScript在验证值方面发挥了重要的作用。为了更好地理解这些术语，让我们通过一个示例来看看。
让我们通过示例了解如何使用JavaScript中的正则表达式验证表单。
示例1： 表单验证（验证电子邮件）
假设有一个注册表单，其中包含最终用户的基本详细信息，如姓名，电话号码，电子邮件和地址。当用户未输入域名和“@”符号的电子邮件时，表单会显示一个错误，显示“未包含域名”。想知道这是如何发生的吗？这是由于JavaScript中的正则表达式。正则表达式可以定义为一种阻止（模式匹配）错误值的机制，即“在最终用户输入错误详细信息而不是给定正则表达式时指示错误”。所使用的一些字符分别是“[abc]，[^ abc]，\ w，\ W，\ S”。因此，通过JavaScript验证最终用户输入的电子邮件地址。
index.html
<!DOCTYPE html>
<html>
<head>
<title>creating mailing system</title>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var user = document.getElementById("e").value;
var user2 = document.getElementById("e");
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (re.test(user)) {
alert("done");
return true;
}
else {
user2.style.border = "red solid 3px";
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text"
placeholder="firstname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="lastname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="email"
placeholder="username@gmail.com" id="e">
</tr>
<br><br>
<tr>
<input type="password" placeholder="password">
</tr>
<br><br>
<tr>
<input type="password" placeholder="confirm">
</tr>
<br><br>
<tr>
<input type="text" placeholder="contact">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr><input type="submit"
onclick="validate()" value="create">
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
输出：
这张图片说明用户输入了一个完美的电子邮件地址，因此表单被接受并完成了注册。当一个人输入了错误的电子邮件地址时，电子邮件文本框将被以红色边框的方式突出显示，以示错误。
示例2：表单验证（验证电话号码）
假设相同的注册表单。您是否想知道为什么电话号码只能以6、7、8、9开头，而不能是其他数字。在这里，正则表达式也扮演了一个角色，帮助验证正确的手机号码。通过正则表达式”[^6-9][,0-9]”，限制用户只能输入10个数字，其中第一个数字应为“6、7、8、9”，其余所有数字可以是0-9中的任何数字，这有助于验证表单中输入的信息是否符合指定的模式。
index.html
<!DOCTYPE html>
<html>
<head>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var user = document.getElementById("c").value;
var user2 = document.getElementById("c");
var re = /^[7-9][0-9]{9}$/;
if (re.test(user)) {
alert("done");
return true;
}
else {
user2.style.border = "red solid 3px";
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text"
placeholder="firstname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="lastname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="email"
placeholder="username@gmail.com">
</tr>
<br><br>
<tr>
<input type="password"
placeholder="password">
</tr>
<br><br>
<tr>
<input type="password"
placeholder="confirm">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="contact" id="c">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr>
<input type="submit"
onclick="validate()" value="create">
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
输出：
这张图片表示用户输入了一个完美的电话号码，因此表单被接受并完成了注册。当输入错误的电话号码时，电话号码的文本框会被红色边框突出显示，表明输入有误。
