可选字段验证答案

【问题标题】：Optional Field validation可选字段验证
【发布时间】：2014-08-31 08:12:01
【问题描述】：

我在 JavaScript 表单验证中遇到了一些问题。

我的 HTML 代码中有一些可选字段。提交时，它们不需要填写，但如果用户提供了一些输入，则必须对其进行验证。例如，我有一个可选的电话号码字段。如果用户提供了输入，那么我需要检查它们是否都是数字。

我该怎么做？

【问题讨论】：

html5pattern.com

标签： javascript html forms validation

【解决方案1】：

如果字段值满足某些前提条件，则只需要调用验证代码，在这种情况下：如果字段有值（通过测试字符串值的length属性检查）：

var fieldValue = document.getElementById("someInput").value;
if( fieldValue.length > 0 ) {

    if( someValidationFunction( fieldValue ) ) alert("Field is invalid");
}

【讨论】：

【解决方案2】：

是什么阻止您使用 HTML5 自己的验证？

<input type="tel" pattern="[0-9]+" />

无需 JavaScript，适用于所有现代浏览器。

关于安全性的说明：出于安全考虑，请不要依赖客户端验证，因为它们很容易被禁用。所有验证也应该在服务器端完成。

【讨论】：

【解决方案3】：

您可以将自定义方法绑定为表单中提交操作的回调

<form onSubmit="return customValidation()>

在方法中进行验证。

function customValidation()
{    
    //code to test fields
    fieldToValidate = document.getElementById("field-id")
    //validate the field
}

【讨论】：

【解决方案4】：

如果您需要更安全，则不能使用其他答案；您不应该使用 JavaScript 执行此操作，因为如果用户出于某种原因在其浏览器中将其关闭（或者他们故意将其关闭），则表单仍不会被验证。相反，您需要在服务器上使用 PHP 来完成。在发送表单的服务器上，您需要获取随表单发送的查询字符串 ($_GET['phonenumber'];)，并查看它是否是数字 (int intval ( mixed $phonenumber ))。如果不是数字，这应该返回 NaN。

【讨论】：