javascript/jquery 输入验证

Posted 2023-05-09

【中文标题】javascript/jquery 输入验证

【英文标题】：javascript/jquery input validation

【发布时间】：2014-03-17 13:04:49

【问题描述】：

我有一个表单，用户可以在单击按钮时添加更多输入框。 用户可以拥有任意数量的输入框。

我不打算添加用于删除字段的按钮。

他们默认的输入框数量是 2。 假设用户决定再添加 3 个，现在总共有 5 个。

为了验证，我想检查输入框是否为空，或者输入是否包含所有空格，例如：“”，无论有多少空格，只要它只有空格即可。 我可以通过检查长度来检查空输入，但是如何检查后者呢？ 是否有任意数量的连续空格的正则表达式？ 谢谢！

PS：我在 jQuery mobile 上使用 jQuery

【问题讨论】：

您介意纯 javascript 解决方案吗？

@Schien 标题写着 javascript /jquery 并且标签包括 javascript 所以我会说去吧。

是的，当然 :) 我会看看我能用它做什么。

【参考方案1】：

如您所知，您可以通过检查其.value.length 来检查输入字段是否为空白。要检查它是否仅包含空格，请尝试以下操作：（假设输入存储在名为input 的变量中）

if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!

Reference.

【讨论】：

谢谢！标记为答案和 +1 以供参考。 trim() 是我想要的。 :)

请注意 .trim() 方法在 IE8 及更早版本中不受支持。你可以使用jQuery的trim。

【参考方案2】：

您的问题有几个组成部分：

如何动态添加输入字段？ 如何遍历这些字段并同时验证它们？ 如何检查字段是否真的包含内容，而不仅仅是空值？

我们需要系统地解决所有这些问题：

从最简单的开始——检测空字符串：

if (value.replace(/\s/g,'')=='') //string is empty

接下来，动态添加输入字段：

var myinput=document.createElement('input');
document.body.appendChild(myinput);

//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);

要检查所有输入字段，首先检查静态输入字段，然后循环遍历动态输入字段：

valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++)
  var input=document.myinputs[i];
  if (input.value.replace(/\s/g,'')=='') valid=false;


alert(valid);

【讨论】：

谢谢！但 rvighne 的答案是最接近的 :) trim() 是我需要的，但看看你的答案并快速搜索一下它似乎也解决了这个问题。另外，在添加输入字段时，我使用了 jquery 中的 .clone() 谢谢！如果我能给 +2