HTML5 表单验证模式带有空格的字母数字？

Posted 2023-02-25

【中文标题】HTML5 表单验证模式带有空格的字母数字？

【英文标题】：HTML5 form validation pattern alphanumeric with spaces?

【发布时间】：2013-11-06 07:38:11

【问题描述】：

我的 html5 表单中有以下输入标记：

<p>
    <label>Company Name*</label>
    <input type="text" name="name" class="field" required pattern="[a-zA-Z0-9]+" />
</p>

这可以很好地检查公司名称是否由字母数字字符组成。但我当然想在公司名称中允许空格。我需要知道我应该在模式中添加什么。

【参考方案1】：

在pattern="[a-zA-Z0-9 ]+" 这样的模式属性中添加一个空格怎么样。 如果您想支持任何类型的空间，请尝试pattern="[a-zA-Z0-9\s]+"

【讨论】：

正是我想要的，谢谢。你能解释一下\s 的任何类型的空间和` ` 空间之间的区别吗？

\s 是一个包含制表符和空格字符的类。

如果我只输入空格，那么它接受。我的模式应该是接受空格但如果只输入空格则不接受？

这不适用于变音符号，即：ą, ó, ä, ö

@bumerang 我们如何轻松地包含这些内容？

【参考方案2】：

我的解决方案是涵盖所有变音符号：

([A-z0-9À-ž\s])2,

A-z - 适用于所有拉丁字符

0-9 - 这是所有数字

À-ž - 适用于所有变音符号

\s - 这是空格

2, - 字符串长度至少为 2 个字符

【讨论】：

这真是太棒了，以前从未见过。 -- 设法找到它，现在我知道它叫什么了：***.com/a/30225759/2848941 非常有用，谢谢！

我之前一直在使用的（它似乎工作，但我不明白，是这样的：[a-zA-Z\u00c0-\u00d6\u00d8-\u00f6\u00f8 -\u024f ]+

您可以简单地使用max-length 和min-length 属性，而不是使用2, 位。不管我喜欢这个答案；特别是对于您花时间做出的澄清，+1。

请不要忘记撇号。我们爱尔兰人首当其冲受到这种反撇号歧视的影响！

@eddyoc 您能否在评论中提供，或者在我的回答中编辑必要的字符范围？

【参考方案3】：

要避免输入只有空格，请使用："[a-zA-Z0-9]+[a-zA-Z0-9 ]+"。

eg: abc | abc aBc | abc 123 AbC 938234

例如，为了确保输入名字和姓氏，请使用像

这样的细微变化

"[a-zA-Z]+[ ][a-zA-Z]+"

eg: abc def

【讨论】：

或者我相信你可以只包含 'required' 属性来规避它。

@user1893702 required 属性将接受空格。你需要一个更大的正则表达式。

【参考方案4】：

这是一个相当古老的问题，但如果它对任何人都有用，从这里找到的良好响应的组合开始，我已经结束了使用这种模式：

pattern="([^\s][A-z0-9À-ž\s]+)"

至少需要两个字符，确保它不以空格开头，但允许单词之间有空格，还允许使用特殊字符，例如ą, ó, ä, ö。

【参考方案5】：

使用此代码确保用户不只是输入空格，而是输入有效名称：

pattern="[a-zA-Z][a-zA-Z0-9\s]*"

【参考方案6】：

<h1>In my case, I need only Number and I hafta stop to user entering any Alphabets. We can also stop to entering any number.</h1>

<hr> 
<p>
<h2>Number only</h2>
<input type="tel" name="PhoneNumber" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');" />
</p>
<hr> 
<p>
<h2>Alphabets only</h2>
<input type="text" name="name" onkeyup="this.value=this.value.replace(/[^A-z]/g,'');" />
</p>

【参考方案7】：

将以下代码用于 HTML5 验证模式字母数字，不带 / 带空格：-

HTML5 验证模式字母数字不带空格：- onkeypress="return event.charCode >= 48 && event.charCode = 97 && event.charCode = 65 && event.charCode

HTML5 验证模式字母数字加空格：-

onkeypress="return event.charCode >= 48 && event.charCode = 97 && event.charCode = 65 && event.charCode

【讨论】：

这个问题似乎是在寻找一种验证模式。另外，请注意charCode、keyCode 和which 等键盘事件属性将被key 取代：developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

【参考方案8】：

使用如下格式代码

$('#title').keypress(function(event)
    //get envent value       
    var inputValue = event.which;
    // check whitespaces only.
    if(inputValue == 32)
        return true;    
    
     // check number only.
    if(inputValue == 48 || inputValue == 49 || inputValue == 50 || inputValue == 51 || inputValue == 52 || inputValue == 53 ||  inputValue ==  54 ||  inputValue == 55 || inputValue == 56 || inputValue == 57)
        return true;
    
    // check special char.
    if(!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0))  
        event.preventDefault(); 
    
)