JavaScript 表单验证

2025年4月23日 | 阅读 3 分钟

验证用户提交的表单很重要，因为它可能包含不当的值。因此，必须进行验证以进行用户身份验证。

JavaScript 提供了在客户端验证表单的功能，因此数据处理比服务器端验证更快。大多数 Web 开发人员都偏爱 JavaScript 表单验证。

通过 JavaScript，我们可以验证姓名、密码、电子邮件、日期、手机号码等字段。

JavaScript 表单验证示例

在此示例中，我们将验证姓名和密码。姓名不能为空，密码不能少于 6 个字符。

在此，我们将在表单提交时进行验证。在给定的值正确之前，用户不会被转发到下一页。

<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name==null || name==""){
  alert("Name can't be blank");
  return false;
}else if(password.length<6){
  alert("Password must be at least 6 characters long.");
  return false;
  }
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>

JavaScript 重新输入密码验证

<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>

<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

JavaScript 数字验证

让我们验证文本字段是否只包含数字值。在这里，我们使用 isNaN() 函数。

<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
  document.getElementById("numloc").innerHTML="Enter Numeric value only";
  return false;
}else{
  return true;
  }
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>

带图片的 JavaScript 验证

让我们来看一个交互式的 JavaScript 表单验证示例，如果输入正确或不正确，它会显示正确的和不正确的图片。

<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;

if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
}
return status;
}
</script>

<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>

输出

JavaScript 电子邮件验证

我们可以借助 JavaScript 验证电子邮件。

要验证电子邮件 ID，需要遵循许多标准，例如：

电子邮件 ID 必须包含 @ 和 . 字符
在 @ 之前和之后至少必须有一个字符。
在 . (点) 之后至少必须有两个字符。

让我们来看一个简单的示例来验证电子邮件字段。

<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
  alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
  return false;
  }
}
</script>
<body>
<form name="myform"  method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>

<input type="submit" value="register">
</form>

下一个主题JavaScript 电子邮件验证

JavaScript 表单验证

JavaScript 表单验证示例

JavaScript 重新输入密码验证

JavaScript 数字验证

带图片的 JavaScript 验证

JavaScript 电子邮件验证

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 表单验证

JavaScript 表单验证示例

JavaScript 重新输入密码验证

JavaScript 数字验证

带图片的 JavaScript 验证

JavaScript 电子邮件验证

相关帖子

JavaScript 电子邮件验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器