JavaScript 入门教程

JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。

W3CAPI

2025-07-13 21:07:08

文档目录

我的书签

请登录

检测浮点数

JavaScript：HTML表单验证 - 浮点数检测

检查浮点数

浮点数包含以下部分。

十进制整数。
小数点（'.'）。
分数
指数（可选）。

指数部分由"e"或"E"后跟一个整数构成，该整数可带符号（前缀为"+"或"-"）。

下面是一些有效的浮点数：

7.2935
-12.72
1/2
12.4e3 [等效于12.4×10³]
4E-3 [等效于4×10^-3]^-3]

在处理涉及数量、长度、高度或金额等需要输入小数数值的场景时，可采用浮点数类型进行数据表示。以下是几种典型实现方式示例：

无指数部分，必须包含整数和小数部分，符号可选。
无指数、强制符号（+-）、整数及小数部分。
强制符号（+-）、指数、整数、小数部分。

为了验证所述格式，我们采用了多种正则表达式。以下代码块包含了实际使用的代码，且我们已将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;
}

执行一下

用于检查表单字段输入是否符合以下规则的JavaScript函数：不含指数的数字，该数字必须包含整数和小数部分，且符号可选。

要获取一个包含数字的字符串，该数字不包含指数部分、强制要求整数和小数部分并允许可选正负号，我们使用正则表达式 /^[-+]?[0-9]+\.[0-9]+$/ 来匹配所述格式。接着使用字符串对象的 match() 方法，将所述正则表达式与输入值进行匹配。以下是完整的网页文档。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Check whether the field input contains a number with no exponent, mandatory integer and fraction and optional sign</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li><li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="check-decimal.js"></script>
</body>
</html>

执行一下

JavaScript代码

function CheckDecimal(inputtxt) 
{ 
var decimal=  /^[-+]?[0-9]+\.[0-9]+$/; 
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
}

执行一下

流程图：

在浏览器中查看示例

JavaScript函数，用于检查字段输入规则：不含指数的数值，且必须包含强制符号(+-)、整数部分及小数部分。该函数返回布尔值，验证输入是否符合指定格式。

要获取一个不含指数、强制要求整数部分、小数部分及正负符号（+ -）的数值字符串，我们使用正则表达式 `/[-+][0-9]+.[0-9]+$/ 来实现所述格式匹配。随后，通过字符串对象的 match() 方法根据输入值匹配所述正则表达式。以下是完整的网页文档。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number starting with sign</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Check whether a field input contains a number with no exponent, mandatory sign (+-), integer, and fraction</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li><li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="check-decimal-with-sign.js"></script>
</body>
</html>

执行一下

JavaScript代码

function CheckDecimal(inputtxt) 
{ 
var decimal=  /[-+][0-9]+\.[0-9]+$/; 
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
}

执行一下

流程图：

在浏览器中查看示例

JavaScript函数：验证字段输入是否为以强制符号(+-)开头，并包含指数、整数及小数部分的数值。使用正则表达式匹配符号、可选整数/小数部分及可选指数部分。

为获取符合强制符号（+ -）、指数整数、小数及符号格式要求的数字字符串，我们使用正则表达式/^[-+][0-9]+\.[0-9]+[eE][-+]?[0-9]+$/来匹配该格式。随后，调用字符串对象的match()方法，将输入值与所述正则表达式进行匹配。以下是完整的网页文档实现。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number with exponent and starting with sign </title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail"><h2>Check whether a field input contains a number starting with mandatory sign (+-), exponent, integer, fraction</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li><li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="check-decimal-with-exponent-sign.js"></script>
</body>
</html>

执行一下

JavaScript代码

function CheckDecimal(inputtxt) 
var decimal= /^[-+][0-9]+\.[0-9]+[eE][-+]?[0-9]+$/;  
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
}

执行一下

流程图：

在浏览器中查看示例

其他JavaScript验证：

上一篇：JavaScript：HTML表单验证 - 检测输入是否为纯数字
下一篇：JavaScript：HTML表单 - 数字与字母验证

作者文档