JavaScript 入门教程
JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。
W3CAPI
1
2025-07-24 06:33:49
密码验证
JavaScript：HTML表单验证——密码检查
密码验证
表单中的密码验证至关重要。密码的创建方式多种多样，其结构可分为简单型、合理型或强安全型。我们借助JavaScript代码和正则表达式，可对多种密码结构类型进行验证。
- 校验密码长度为7至16个字符，且仅包含字母、数字及下划线，且首字符必须为字母。
- 验证6至20位密码，需包含至少一个数字，一个大写字母和一个小写字母。
- 校验密码长度为7至15个字符，且至少包含一个数字、以及一个特殊字符。
- 验证密码是否符合8至15位字符要求，且至少包含一个小写字母、一个大写字母、一个数字及一个特殊字符。
以下代码块包含上述各验证功能的具体实现代码。所有验证功能均保持了CSS代码部分的通用性。
CSS代码：
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}校验密码长度在7至16个字符之间且只能包含字母、下划线，且首字符必须为字母
为验证所述格式，我们使用正则表达式 ^[A-Za-z]\w{7,15}$，其中 \w 匹配包含下划线的任意单词字符（等同于 [A-Za-z0-9_]）。接着使用字符串对象的 match() 方法，根据输入值对所述正则表达式进行匹配。以下是完整的网页文档。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
title>JavaScript form validation - Password Checking - 1</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]</h2
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-1.js"></script>
</body>
</html>
JavaScript 代码：
function CheckPassword(inputtxt)
{
var passw= /^[A-Za-z]\w{7,14}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
验证密码长度为6至20个字符且至少包含一个数字、一个大写字母及一个小写字母。
为验证所述格式，我们使用正则表达式 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,8}$。随后通过字符串对象的match()方法将该正则表达式与输入值进行匹配。以下是完整的网页文档。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 2</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-2.js"></script>
</body>
</html>JavaScript 代码：
function CheckPassword(inputtxt)
{
var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
验证密码长度为7至15个字符，且至少包含一个数字、以及一个特殊字符
为了验证所述格式，我们使用正则表达式 ^^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$。该表达式要求输入值必须包含至少一个数字和一个特殊符号(!@#%^&)，且长度在7到15个字符之间。接下来通过字符串对象的match()方法将该正则表达式与输入值进行匹配。以下是完整的网页文档实现。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 3</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain at least one numeric digit and a special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-3.js"></script>
</body>
</html>
JavaScript代码
function CheckPassword(inputtxt)
{
var paswd= /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
if(inputtxt.value.match(paswd))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
验证密码是否为8至15个字符且包含至少包含一个小写字母、一个大写字母、一个数字以及一个特殊字符
为验证所述格式，我们使用正则表达式 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$。随后字符串对象的match()方法被用于将输入值与所述正则表达式进行匹配。以下是完整的网页文档。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 4</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-4.js"></script>
</body>
</html>JavaScript 代码：
function CheckPassword(inputtxt)
{
var decimal= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if(inputtxt.value.match(decimal))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
上一篇：JavaScript：HTML表单 - 信用卡号码验证
下一篇：JavaScript：HTML表单——IP地址验证
作者文档
相关提问
敬请期待
扫一扫关注官方微信公众号
豫ICP备18043494号-2 以API的视角诠释计算机技术