时间戳

首页 > 解决方案 > 如何仅在 vuejs 中使用带有字符和数字的文本框？

javascript - 如何仅在 vuejs 中使用带有字符和数字的文本框？

问题描述

 methods: {      
      isEmail(e) {
       let char = String.fromCharCode(e.keyCode); // Get the character
       if(/^[A-Za-z]+$/.test(char)) return true; // Match with regex 
       else e.preventDefault(); // If not match, don't add to input text 
                   },
 <input type="email" v-model.trim="$v.email.$model" :class="{'is-invalid': validationStatus($v.email)}" class="input-section" placeholder="Enter your company email ID" :maxlength="maxemail" v-on:keypress="isEmail($event)"> 

<div v-if="!$v.email.required" class="invalid-feedback">The email field is required. 
</div>
<div v-if="!$v.email.maxLength" class="invalid-feedback">30 characters {{ 
$v.email.$params.maxLength.min }} only</div>

我的问题是，目前上面的文本框只接受字符（A 到 Z 和 z 到 A）。但是，我需要它接受字母数字字符（即 A 到 Z、a 到 z、0 到 9 以及 *、&、@ 等特殊字符）。如何更改上面的代码来完成此操作？

标签： javascriptregexvue.js

解决方案

您可能知道也可能不知道，/^[A-Za-z]+$/它是一个正则表达式，目前仅限于允许值 A 到 Z 和 a 到 z。

如果我要纯粹回答您的问题，那就是将缺少的字符添加到您现有的正则表达式中。例如/^[A-Za-z0-9*&@]+$/

请注意，您可以使用在线工具来测试和验证您的正则表达式。
例如：https ://regex101.com/r/uE4GfO/2

但是，目前它仅验证每个字符的字符，而一次验证整个字符串会更有效（并且很可能更正确）。

此外，您似乎正在尝试验证电子邮件地址。您应该考虑使用此处讨论的正则表达式：请参阅如何在 JavaScript 中验证电子邮件地址

推荐阅读