js验证框架实现代码分享

这篇文章向你介绍了一个非常实用的JavaScript验证框架的源码实现，对于开发者来说具有很高的参考价值。如果你对此感兴趣，不妨花些时间了解一下。

一、核心方法与原理

让我们首先关注 `check(thisInput)` 方法中的关键部分：

```javascript

if (!eval(scriptCode)) {

return false;

}

```

这段代码是验证流程中的核心，它负责执行并评估传入的 `scriptCode`。如果评估结果不为真，方法将返回 `false`，终止后续验证。

二、调用示例

在实际应用中，你可以通过HTML元素来调用这个验证框架。例如：

```html

```

在这个例子中，输入框被赋予了 `validate` 属性，它指定了需要执行的验证方法，如 `isNumeric` 和 `notNull`。当用户在输入框中进行操作时，框架会自动调用这些方法，并根据返回的结果信息来判断输入是否有效。

三、丰富的验证功能

这个验证框架支持多种验证方法，包括但不限于数值验证、非空验证等。你可以根据实际需求，灵活组合使用这些方法，以满足不同场景下的验证需求。

四、实际应用与拓展

除了上述基本用法，你还可以根据这个框架的源码进行拓展，开发更多实用的验证方法。例如，你可以添加对特定格式、范围的验证，或者根据业务逻辑定制更复杂的验证规则。

验证框架源码解读

============

在这段源码中，我们看到了一个复杂的表单验证机制。让我们深入了解其工作原理。

一、全局变量配置与初始化

--

二、表单验证函数 `checkAllForms`

该函数负责检查所有表单元素的有效性。它遍历每个表单及其元素，并对不同类型的输入进行验证。如果输入不符合某些条件（例如长度超过限制），则通过 `writeValidateInfo` 函数反馈错误信息。在此过程中，还考虑了一些特殊情况，如隐藏元素、特定ID的元素等。

三、单个元素验证函数 `check`

--

这个函数用于检查单个表单元素的有效性。它首先从元素中获取验证规则（`validateStr`），然后尝试执行每个验证规则对应的JavaScript代码。如果代码执行失败（返回 `false`），则此元素验证失败。

四、验证逻辑

--

这段代码的验证逻辑相当灵活。验证规则以分号分隔，可以包含JavaScript代码，这些代码会接收输入值并当前元素作为参数。这种设计使得表单验证非常自定义和强大。使用 `eval` 函数来执行代码片段存在一定的安全风险，需要确保验证规则的安全性。

五、注意事项与改进建议

-

尽管这段代码实现了表单验证的基本功能，但还存在一些可以改进的地方：

1. 使用 `eval` 执行代码存在安全风险，需要确保验证规则的安全性。建议对验证规则进行白名单校验或其他安全措施。

2. 代码中的注释使用了非标准的字符（如 `/`），这可能导致代码难以阅读或出错。建议使用标准注释方式。

3. 对于表单元素的特殊处理（如隐藏元素、特定ID的元素），建议通过更明确的方式（如使用CSS类）来实现，以提高代码的可读性和可维护性。

验证与设置默认输入值函数集

让我们一步步走进代码的奇妙世界，这里汇聚了一系列用于验证和设置默认输入值的函数。它们静静地在后台工作，确保用户界面的顺畅运行。

checkInputValidity函数

当用户尝试提交表单时，这个函数会仔细检查每一个输入框。如果发现任何不符合规定的输入，它会立即发出警告，并阻止表单的提交。它的严谨性确保了数据的准确性。

setAllVenusInputsDefault函数

这个函数负责为所有的表单输入项设置默认样式。无论是文本输入框、选择框还是其他任何类型的输入项，只要它们不是隐藏的或者按钮，都会被纳入考虑范围。它确保了用户界面的整洁和一致性。

setVenusInputDefault函数

这个函数将指定的输入框设置为默认样式，无论它是否已经包含了输入值。这个操作确保了用户输入的流畅性和舒适性。

replaceEnter和replaceSingleQuote函数

这两个函数负责处理用户输入的文本内容。前者会移除文本中的换行和回车字符，后者则会替换文本中的特殊字符，如引号、括号等。它们确保了文本内容的规范性。

isContains函数

这个函数会检查一个字符串是否包含另一个字符串中的某个字符或子串。它的功能虽然简单，但在验证用户输入时却起到了关键的作用。

writeValidateInfo函数

```javascript

//验证信息处理

if (ConfigValidateInfoTypecludes("writePage")) {

writeValidateInfoAfterObject(info, thisObj); //在对象后写入校验信息

}

if (ConfigValidateInfoTypecludes("writeAlert")) {

writeValidateInfoAlert(info, thisObj); //弹出警告框显示校验信息

}

if (!rmTempStatusIsFocus) { //如果未聚焦，则设置输入错误并聚焦

setVenusInputError(thisObj);

rmTempStatusIsFocus = true; //设置聚焦状态为已聚焦

}

//设置输入错误样式

function setVenusInputError(_frm) {

try {

_frm.focus(); //聚焦输入框

//对于不支持内容选择的SELECT元素进行特殊处理，避免报错（修改于2009-11-12）

if (_frm.tagName !== "SELECT") {

_frm.select(); //选择输入框中的内容

}

_frm.style.borderStyle = "dashed"; //设置边框为虚线

_frm.style.borderColor = "rgb(255,50,0)"; //设置边框颜色为橙色

if (_frm.value && _frm.value.length > 0) { //如果输入框有值，则设置背景色和字体颜色

_frm.style.backgroundColor = "highlight";

_frm.style.color = "white";

}

} catch (e) {

alert(e.message); //捕获异常并弹出提示信息

}

}

//弹出警告框显示校验信息

function writeValidateInfoAlert(info, thisObj) {

if (!rmTempStatusIsAlert) { //如果未弹出警告，则弹出警告框显示校验信息

alert(info);

rmTempStatusIsAlert = true; //设置警告状态为已弹出警告框状态（避免重复弹出）

}

}

function writeValidateInfoAfterObject(info, thisObj) {

在信息录入时，有效的验证是确保数据准确性的关键。让我们编写几个实用的验证函数，确保用户输入的数据符合规定格式。

1. 内容验证函数

当用户尝试提交表单时，我们需要确保某些字段不为空或只包含空格。为此，我们可以编写一个函数来检查输入内容。

```javascript

function validateContent(inputValue, inputField) {

// 去除首尾空格

var trimmedValue = Jtrim(inputValue);

if (trimmedValue === '') {

writeValidateInfo('不能为空或仅包含空格！', inputField);

return false;

} else {

return true; // 输入有效，继续后续验证

}

}

```

2. 数字格式验证函数（针对带有小数点的数字）

有时我们需要用户输入特定的数字格式，如带有两位小数的数字。我们可以使用正则表达式进行验证。

```javascript

function isNumericWithDecimal(inputValue, inputField) {

var regex = /^[0-9](\.[0-9]{1,2})?$/; // 正则表达式验证数字格式

if (!regex.test(inputValue)) {

writeValidateInfo('请输入有效的数字或确保小数点后最多两位！', inputField);

return false; // 输入无效，返回错误信息并终止函数执行

} else {

return true; // 输入有效，继续后续处理或验证其他规则

}

}

```

3. 手机号码验证函数

手机号码的验证规则日益复杂，我们需要确保输入的号码符合各种规则。以下是一个基本的手机号码验证函数。请注意，这个函数是基于中国的手机号码规则编写的。如果您需要针对其他国家或地区的手机号码进行验证，请调整相应的规则。

```javascript

在输入验证的领域中，我们面临着一系列的挑战，其中之一就是确保用户输入的是有效的电话号码、传真号码或是纯中文内容。为了实现这一目标，我们需要设计一系列验证函数来确保输入信息的准确性。下面是一些具体的函数介绍。

验证普通电话和传真号码的函数 `isTelForFax` 和 `isFax`

当我们面对一个电话号码或传真号码输入框时，首先需要去除可能的空格或其他空白字符。这两个函数的主要目的是验证用户输入的号码是否符合一定的格式要求。它们的核心逻辑是检查输入字符串是否符合电话号码或传真号码的格式，比如中国的电话号码通常以区号和数字组合的方式呈现。如果不符合，则向用户反馈提示信息。需要注意的是，这些函数允许以“+”开头的号码，并且允许包含“-”作为分隔符。它们也考虑了数字的位数要求。如果输入为空或者符合格式要求，函数返回true；否则返回false。

中文输入验证函数 `isChinese` 和非中文输入验证函数 `notChinese`

在处理涉及中文输入的场合时，我们需要确保用户输入的是纯中文内容或非中文内容。这两个函数通过调用 `ischinese` 函数来检查输入字符串是否包含中文字符。如果包含中文字符但不符合要求（如非中文输入场合却输入了中文），则向用户反馈提示信息。如果不包含中文字符并且符合格式要求（如纯中文输入场合），则函数返回true；否则返回false。这些函数同样会先尝试去除空格或其他空白字符。

数字输入验证函数 `isNum`

Venus Web的JavaScript代码：高级验证功能

在Venus Web的JavaScript代码中，我们拥有一些强大的验证功能，这些功能确保用户输入的数据符合特定的格式和要求。让我们深入了解这些校验功能。

一、数字验证：确保输入的是纯数字且大于零

当用户输入一个数字时，我们需要确保它没有任何非数字字符并且必须大于零。这是一个严格的规则，不允许例外。我们提供的`isNumBigtoZero`函数能够轻松完成这项任务。它会去除输入中的空格，然后检查每个字符是否为数字。如果输入中包含任何非数字字符，就会提示用户重新输入。如果输入的数字小于或等于零，也会给出相应的提示。只有当输入满足所有条件时，函数才会返回true。

二、电子邮件验证：确保输入的电子邮件地址有效合法

在验证用户提供的电子邮件地址时，我们有一个严格的`isEmail`函数。这个函数首先会去除输入中的空格，然后检查电子邮件地址的长度是否超过100位。接下来，它会使用一个正则表达式来检查电子邮件地址的格式是否正确。如果电子邮件地址格式正确，函数返回true；否则，提示用户重新输入有效的电子邮件地址。

三、IP地址验证：确保输入的IP地址正确

为了确保用户输入的IP地址有效，我们有一个`isIP`函数。这个函数使用一个正则表达式来检查输入的字符串是否符合IP地址的格式。如果符合，函数返回true；否则，提示用户重新输入正确的IP值。

四、非空验证：确保输入的字符串不为空

为了确保用户没有遗漏任何必填的字段，我们提供了`notNullWithoutTrim`函数。这个函数会去除输入中的空格后检查字符串是否为空。如果为空，它会提示用户必须输入相应的内容。这样，我们可以确保用户不会遗漏任何重要的信息。

数字验证专家：确保输入的准确性和魅力

在我们的日常生活中，我们经常需要验证用户输入的数据，以确保其准确性和合规性。特别是在网页或应用程序中，输入验证显得尤为重要。今天，我们将介绍两个关键的验证功能：验证输入是否为空，以及验证输入是否为整数。

```javascript

function isNotEmpty(inputValue) {

// 清除空格并验证输入

try {

inputValue = inputValue.trim(); // 移除字符串两侧的空白字符

} catch (error) {

// 处理可能的错误情况

}

// 如果输入为空，提示用户并提供反馈

if (inputValue === '') {

writeValidateInfo('请输入内容！'); // 假设这是一个函数，用于显示验证信息

return false; // 输入为空，返回false

}

return true; // 输入非空，返回true

}

```

接下来，我们关注另一个重要的验证功能：判断输入是否为整数。这个功能对于确保数据的准确性和有效性至关重要。我们可以使用以下代码实现：

```javascript

function isInteger(inputStr) {

// 清除空格并验证输入字符串是否为整数

inputStr = inputStr.trim(); // 移除字符串两侧的空白字符

// 如果输入字符串为空，则认为通过整数验证

if (inputStr.length === 0) {

return true; // 空字符串也视为通过验证（这里假设空字符串不被视为有效整数）

}

// 使用正则表达式验证输入是否为整数

var integerRegex = /^[-+]?[0-9]+$/; // 正则表达式匹配整数格式（-可选，+可选，数字必须存在）

return integerRegex.test(inputStr); // 返回验证结果（true 或 false）

}

```

表单验证专家：细致入微的输入检查

在Web表单中，用户输入的每一个字符都至关重要。为了确保数据的准确性和安全性，我们提供了一系列细致的输入检查功能。

1. 普通字符检查：

输入内容不能以`<`、`>`或空格开头。

输入内容不能包含全角字符如“·”、“—”或“——”等。当检测到这些字符时，系统会弹出提示信息并高亮显示错误位置。

2. 特殊字符检查：

输入内容不能包含双引号`" "`和单引号`' `。确保数据的纯净性，避免潜在的安全风险。

输入内容也不能包含反斜杠`\\`等特殊字符。这有助于防范潜在的代码注入攻击。

3. 数字输入检查：

对于数字输入框，我们会进行严格的长度和格式校验。确保您的数字输入既不过长，也符合浮点数格式。当输入超出预设范围或格式不正确时，系统会给出提示并帮助您修正错误。

核心功能概览：

`Jtrim(str)`：去除字符串两端的空格，确保数据的准确性。

`isNumber(s)`：判断输入是否为数字，增强数据的有效性。

`ischinese(s)`：检测输入是否为中文，适用于需要特定语言输入的场合。

`HoldCode(str)`：检查字符串中是否含有特定的全角字符。

`validateForm(current_form)`：对整个表单进行细致的检查，确保每一个字段都符合预设的规则。当发现错误时，会弹出提示信息并高亮显示错误位置。这对于增强用户体验和确保数据质量至关重要。

`checkNumber(s, inputName)`和`checkNumberImpl(s, maxLength, scale)`：针对数字输入进行专门的校验，确保数字的格式和长度都符合预设规则。这对于金融、科学计算等需要精确数字的场合特别有用。

数字验证专家——为您的数据输入保驾护航

在数据输入的过程中，我们经常会遇到各种验证要求，为了确保数据的准确性和合法性，我们需要进行严格的验证。以下是一些常见的数字验证函数，它们将帮助您确保用户输入的数据符合预期的格式和要求。

一、整数验证

当用户需要输入一个整数时，我们可以使用checkInt函数来进行验证。这个函数首先会去除输入值两侧的空格，然后检查输入的内容是否是一个正整数。如果不是，它将提示用户重新输入。这个函数确保了用户输入的是一个有效的正整数。

二、数字（正整数或包含小数）验证

对于需要输入正整数或包含小数的数字，我们可以使用isNumeric函数。这个函数同样会先去除输入值两侧的空格，然后检查输入的内容是否符合正整数或小数的要求。如果不符合，它将提示用户重新输入。这个函数适用于需要输入数字的场景，无论是整数还是小数。

三、浮点数验证

当用户需要输入一个浮点数（即包含小数点的数字）时，我们可以使用isFloatNumber函数。这个函数会检查输入的内容是否包含有效的数字和一个小数点，并且小数点只出现一次。如果输入不符合这个要求，它将提示用户重新输入。这个函数确保了用户输入的是一个有效的浮点数。

四、搜索项验证

在搜索功能中，我们需要确保用户输入的搜索项不包含非法字符。isSearch函数可以帮助我们实现这个目的。它会检查输入的内容是否包含特定的非法字符，如果包含，将提示用户重新输入。这个函数保证了搜索项的合法性和准确性。

数字验证专家

当我们面对用户输入时，数字验证是确保数据准确性和应用流畅性的重要环节。以下是针对不同数字格式需求的验证函数。

验证数字（最大整数位10位，可带小数）

让我们开始验证数字的旅程。我们来处理一个常见的数字格式：最大整数位为10位，并允许小数存在。用户在输入时可能会不小心输入多余的空格，我们的代码会温柔地去除这些空格，然后精准地判断数字的格式。如果用户输入的数字不符合要求，我们会友好地提醒他们重新输入。

验证数字（18,2格式）

接下来，我们面临一个稍微复杂的数字格式验证：整数位最多16位，小数位最多2位。同样，我们会先清理多余的空格，然后通过正则表达式进行严格检验。不符合格式的数字输入，我们会给出相应的提示。

验证数字（18,4格式）

再来看一个数字格式：整数位最多14位，小数位最多4位。我们的验证流程依然不变，清理空格，严格检验，不合规则则提醒用户。

验证数字（5,2格式）

对于整数位最多3位，小数位最多2位的数字格式，我们的验证逻辑依然清晰：去除空格，进行格式检验，不合规则则给出提示。

验证Email

在信息时代，Email地址的验证同样重要。我们的函数会检验输入的Email地址是否符合规范。如果不符合，会提醒用户重新输入正确的Email地址。

验证身份证（支持15位或18位身份证）

```javascript

function validateIDCard(value, inputElement) {

// 移除输入值两侧的空格

value = value.trim();

// 如果输入为空，则通过验证

if (value === '') {

return true;

}

// 使用正则表达式验证身份证格式

var regex = /^\d{15}(\d{2}[A-Za-z0-9])?$/;

// 如果格式不正确，显示错误信息并返回false

if (!regex.test(value)) {

displayValidationError('请输入有效的身份证号码！', inputElement);

return false;

}

// 身份证格式正确，返回true

return true;

}

```

验证邮政编码

```javascript

function validatePostalCode(value, inputElement) {

// 移除输入值两侧的空格

value = value.trim();

// 如果输入为空，则通过验证

if (value === '') {

return true;

}

// 使用正则表达式验证邮政编码格式（中国）

var regex = /^[0-9]\d{5}$/;

// 如果格式不正确，显示错误信息并返回false

if (!regex.test(value)) {

displayValidationError('请输入正确的邮政编码！', inputElement);

return false;

}

// 邮政编码格式正确，返回true

return true;

}

```

验证是否为中文字符

```javascript

function validateChineseCharacters(value, inputElement) {

分数校验，确保在0到100之间

当我们接收到一个分数字符串时，首先要做的就是对它进行校验，确保它处于合法范围内——也就是0到100之间。在这个过程中，我们会去除字符串两端的空白，然后检查其有效性。如果不符合要求，我们会提示用户输入一个合法的分数。这是一个保障数据合法性的重要环节。

密码强度检测，多重验证确保安全

对于密码的强度，我们有着严格的要求。我们的`pwdStrength`函数能够检测密码中是否包含数字、大写字母、小写字母以及特殊字符，并且密码长度必须达到一定的要求。如果密码中包含了这些元素并且长度达标，我们就会认为这个密码的强度达到了要求。这一系列的验证流程，都是为了确保用户的账户安全。

数字输入验证，拒绝非法值

在某些场景下，我们需要用户输入一个大于零的数字。这时，我们就会使用`isBiggerZero`函数来进行验证。如果用户输入的值小于或等于零，我们就会提示用户重新输入一个合法的数字。同样的，对于非负数的需求，我们也提供了相应的验证函数`isNonnegative`。

数字格式校验，规范输入避免错误

在进行某些特定操作时，我们需要用户输入特定格式的数字，如整数位最多14位，小数位最多6位。这时，我们会使用`isNum20p6`函数来进行校验。如果用户的输入不符合这个格式，我们就会提示他们重新输入。这样的校验机制能够确保数据的规范性，避免因为格式错误导致的后续问题。

数字验证专家指南

在数字输入场景中，为了确保数据的准确性和有效性，我们需要对输入的数字进行严格验证。以下是针对不同需求的数字验证方法。

验证数字(18,6)

对于需要整数最多12位、小数最多6位的数字输入，我们使用如下函数：

`isNum18p6`函数首先会去除输入值的空格，然后通过正则表达式检查数字格式。如果不符合格式要求，将提示用户输入正确的数字格式。该函数还会调用`isBiggerZero`函数检查数字是否大于零。

验证数字(20,4)

对于整数最多16位、小数最多4位的数字输入，我们使用`isNum20p4`函数进行验证。流程与`isNum18p6`类似，首先去除空格，然后通过正则表达式进行格式检查，并调用`isBiggerZero`确保数字大于零。

供应商保证金金额验证

针对供应商输入的单批次保证金金额，要求是正整数并且只能精确到百位。我们利用`isDPCBZJ`函数进行验证。该函数首先去除输入值的空格，然后通过正则表达式确保金额格式正确。如果不符合格式要求，将提示用户输入正确的保证金金额。

报表招标年度验证

为了确保报表招标的起始年度不大于终止年度，我们提供了`validateYear`函数进行判断。如果起始年份大于终止年份，会弹出提示框告知用户起始年份不能大于终止年份。

以上就是针对数字验证的指南内容，旨在帮助大家更好地理解和实现数字验证功能，确保数据的准确性和有效性。在实际应用中，请根据具体场景和需求选择合适的验证方法。希望这些内容能对大家的学习和实践有所帮助。

在这片神奇的土地上，每一处风景都如诗如画。山川湖泊、森林草原，构成了一幅美丽的画卷。春天，百花争艳，绿意盎然；夏日，阳光普照，热情如火；秋季，层林尽染，丰收在望；冬时，白雪皑皑，宛如仙境。每一处景色都让人陶醉其中，流连忘返。

Cambrian的生灵也独具特色。在这里，你可以看到各种各样的生物，它们在自己的世界里自由生长，繁衍生息。这些生灵不仅各具特色，还充满了生机与活力，让整片土地更加丰富多彩。

在这片土地上，人文氛围也格外浓厚。这里的人们热情好客，善良淳朴。他们用自己的双手，创造着美好的生活。在这里，你可以感受到浓厚的乡土气息，体验到纯朴的民俗风情。这些元素共同构成了Cambrian独特的人文魅力，让人流连忘返。

当我们走进Cambrian的世界时，仿佛置身于一个梦幻的仙境。这里的山水、生灵和人文氛围都让人感受到无尽的魅力。每一个角落都充满了生机与活力，让人心旷神怡。在这里，我们可以放下繁琐的尘世琐事，放松心情，享受这片土地带给我们的宁静与美好。

让我们一起Cambrian的奥秘，感受这片土地的独特魅力。让我们用心去感受这里的山水、生灵和人文氛围，让这片土地成为我们心中永远的净土。在这里，我们可以找到内心的宁静与平衡，重新焕发生活的活力与激情。