JavaScript 入门教程
JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。
W3CAPI
1
2025-07-22 07:50:58
示例注册表单字段级验证
使用JavaScript实现注册表单的字段级表单验证
详细说明
本文档通过示例注册表单探讨了JavaScript字段级表单验证。下图展示了各字段需应用的验证规则。
如何设置这些验证
我们创建了多个JavaScript函数（每个需要验证的输入字段对应一个独立函数），用于检查用户提交的值是否通过验证。
该功能设置并持续将焦点保持在输入字段上，直至用户提供有效值。
当用户执行该操作时，即可继续流程并向下一个可用字段输入值。
后创建的JavaScript函数在表单的onsubmit事件时被调用。
示例注册表单的HTML代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Field Label Form Validation using a registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Field label form validation using a sample registration form. " />
<link rel='stylesheet' href='js-field-level-form-validation.css' type='text/css' />
<script src="field-level-sample-registration-form-validation.js"></script>
</head>
<body onload="firstfocus();">
<h1>JavaScript Field Label Form Validation using a registration form</h1>
<h2>Use tab key or mouse to go next field</h2><form name='registration'">
<ul>
<li><label for="userid">User id [5 to 12 characters] :</label></li>
<li><input type="text" name="userid" size="12" onblur="userid_validation(5,12)"/></li>
<li><label for="passid">Password [7 to 12 characters] :</label></li>
<li><input type="password" name="passid" size="12" onblur="passid_validation(7,12)"/></li>
<li><label for="username">Name [Alphabates characters] :</label></li>
<li><input type="text" name="username" size="50" onblur="allLetter()"/></li>
<li><label for="address">Address [alphanumeric characters] :</label></li>
<li><input type="text" name="address" size="50" onblur="alphanumeric()"/></li>
<li><label for="country">Country [Must select a country] :</label></li>
<li><select name="country" onblur="countryselect()">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code [numeric characters] :</label></li>
<li><input type="text" name="zip" onblur="allnumeric()"/></li>
<li><label for="email">Email [Valid email] :</label></li>
<li><input type="text" name="email" size="50" onblur="ValidateEmail()" /></li>
<li><label id="gender">Sex [Select Male or Female] :</label></li>
<li><input type="radio" name="sex" value="Male" checked /><span>Male</span></li>
<li><input type="radio" name="sex" value="Female" /><span>Female</span></li>
<li><label>Language [Optional] :</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About [Optional] :</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" onclick="alert('Form submitted successfully')" /></li>
</ul>
</form>
</body>
</html>
field-level-sample-registration-form-validation.js 是外部 JavaScript 文件，其中包含用于验证表单的 JavaScript 代码。form.js-field-level-form-validation.css 是包含表单样式的样式表。
出于演示目的，我们仅选取了五个国家。您可在列表中任意添加其他国家。
示例注册表单的CSS代码
h1{
margin-left: 50px;
color: navy;
}
h2{
margin-left: 50px;
color: navy;
margin-top: -20px;
}
form li{
list-style: none;
margin-bottom: 5px;
}
form ul li label
{
float: left;
clear: left;
width: 265px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
form ul li input, select, span
{
float: left;
margin-bottom: 10px;
border: 1px solid maroon;
}
form textarea
{
float: left;
width: 350px;
height: 150px;
}
[type="submit"]
{
clear: left;
margin: 20px 0 0 300px;
font-size:18px
}
JavaScript验证代码.
作用于相关输入框onblur事件的JavaScript函数
// After form loads focus will go to User id field.
function firstfocus()
{
var uid = document.registration.userid.focus();
return true;
}
// This function will validate User id.
function userid_validation(mx,my)
{
var uid = document.registration.userid;
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
// Focus goes to next field i.e. Password.
document.registration.passid.focus();
return true;
}
// This function will validate Password.
function passid_validation(mx,my)
{
var passid = document.registration.passid;
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
// Focus goes to next field i.e. Name.
document.registration.username.focus();
return true;
}
// This function will validate Name.
function allLetter()
{
var uname = document.registration.username;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
// Focus goes to next field i.e. Address.
document.registration.address.focus();
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
// This function will validate Address.
function alphanumeric()
{
var uadd = document.registration.address;
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
// Focus goes to next field i.e. Country.
document.registration.country.focus();
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
// This function will select country name.
function countryselect()
{
var ucountry = document.registration.country;
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
// Focus goes to next field i.e. ZIP Code.
document.registration.zip.focus();
return true;
}
}
// This function will validate ZIP Code.
function allnumeric()
{
var uzip = document.registration.zip;
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
// Focus goes to next field i.e. email.
document.registration.email.focus();
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
// This function will validate Email.
function ValidateEmail()
{
var uemail = document.registration.email;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
document.registration.desc.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
您可查看此内容字段级示例：JavaScript注册表单验证在独立浏览器窗口中运行并查看验证功能的工作情况。
其他JavaScript验证：
作者文档
相关提问
敬请期待
扫一扫关注官方微信公众号
豫ICP备18043494号-2 以API的视角诠释计算机技术