如何使用javascript防止在表单中输入数字

Question

这是我的多步骤注册表的一部分，并且运行良好。 但我想为“student_name”变量添加一个数字验证，这样系统就会阻止学生在名字中输入数字。

if (step === 2) {
    // Example: check if username is not empty
    var student_name = document.querySelector('#student_name').value;
    if (student_name === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (student_name.length < 3 || student_name.length > 30) {
        isValid = false;
        Swal.fire({
            icon: 'info',
            title: 'the character must <3 or >30'
        });
    } else
        var student_email = document.querySelector('#student_email').value;
    if (student_email === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (!student_email.includes('@')) {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Email must include "@"'
        });
    }
}

所以我添加了从ai 获得的这段代码。

if (/\d/.test(student_name)) {
    isValid = false;

    // Display an error message using SweetAlert
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'number is not allowed in student name.'
    });
}

这是我添加该代码后的代码。

if (step === 2) {
    // Example: check if username is not empty
    var student_name = document.querySelector('#student_name').value;
    if (student_name === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (student_name.length < 3 || student_name.length > 30) {
        isValid = false;
        Swal.fire({
            icon: 'info',
            title: 'the character must <3 or >30'
        });
    }
    // new added code (start)
     else if (/\d/.test(student_name)) {
        isValid = false;
    
        // Display an error message using SweetAlert
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'number is not allowed in student name'
        });
    }
    // new added code (end)
     else
        var student_email = document.querySelector('#student_email').value;
    if (student_email === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (!student_email.includes('@')) {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Email must include "@"'
        });
    }
}

但它不起作用 - 没有错误消息。

Answer 1

我认为错误在于变量名nama_siswa。

相反，您应该使用 Student_name 作为变量来使用表示 0 到 9 的数字的正则表达式 /d 进行测试。

所以你的代码应该是这样的：

// new added code (start)
 else if (/\d/.test(student_name)) {
    isValid = false;

    // Display an error message using SweetAlert
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'number is not allowed in student name'
    });
}
// new added code (end)

Answer 2

HTML 表单会自我验证。

要验证名称长度是否为 3-30 个字符，您可以添加

minlength="3"

和

maxlength="30"

属性。

如果输入具有

type="email"

属性，则可以验证电子邮件。

您需要做的就是将

required

属性添加到输入中，它甚至会抛出取决于用户系统语言的本地化错误消息：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" minlength="3" maxlength="30" required>
  
  <br>
  
  <label for="email">E-Mail:</label>
  <input type="email" required>
  
  <br><br>
  
  <input type="submit">
</form>

PS：你不应该要求人工智能为你编程。人工智能只会执行您的提示并据此提供答案。如果您一开始就问错了问题（XY 问题），人工智能不会告诉您。

Answer 3

nama_siswa

而不是

student_name

的变量。但是，我想补充一点，除了名称字段中的数字之外，您还可能遇到很多其他问题。例如，Unicode 有一个不能被 \d 捕获的数字字符数组。在某些情况下，您可以使用 \p{n} 来匹配所有具有“数字”属性的 Unicode 字符，但这似乎在浏览器中还没有得到很好的实现。可以在此处找到一些解决方法：

如何在 JavaScript 中使用支持 Unicode 的正则表达式？

如果您知道用户的位置并且预计他们使用基于罗马字母的语言，那么将输入限制为一组允许的字符可能会更容易。但是，您应该足够宽容以允许 é 和 ñ 等变体。我强烈推荐 RegexBuddy 程序来根据可能的名称测试您的正则表达式。

最后，我强烈建议对后端进行二次检查。如果坏字符可能会扰乱您的其他脚本，那么您不能仅依赖基于浏览器的验证。服务器需要检查输入的数据并确保其符合后再保存。

Answer 4

要显示警报，您可以使用当表单中的某些内容无效时触发的无效事件。

只有整个表格有效，表格才会提交。

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  swal({
    title: e.target.title,
    icon: "error",
  });
}, true);

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('submitting...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form name="form01">
  <label>Student name:<input type="text" name="student_name" minlength="3"
    maxlength="30" pattern="[^\d]+"
    title="Student name must be between 3 and 30 characters and no digits"
    required></label>
  <label>Student email:<input type="email" name="student_email"
  title="The email must be a valid email address" required></label>
  <button>Submit</button>
</form>

Answer 5

document.getElementById("sName").addEventListener("keydown", function(e) {
  if (/^\d$/.test(e.key)) {
    e.preventDefault();
    //Raise Error
    alert("Numbers are not allowed")
  }
});

<input id="sName" placeholder="Enter Stuent Name">