javascript - 使用 javascript 和 onchange 事件检查表单中的名称字段是否包含数字

Question

我是新秀的定义，我不知道自己在做什么。我必须使用 javascript 创建一个函数来对表单中的“名称”字段执行验证。检查将查看是否输入了任何内容或者名称是否包含数字。除此之外，我必须使用 onchange 事件。我尝试搜索，得到了答案，我看到答案中有 jquery 代码，但我不能在这个问题中使用它。我不知道该怎么办，有人可以帮忙吗？这是我正在使用的表格

     <form method="get">
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Name" onChange="" >
        <br>
        <label for="age">Age</label>
        <input type="age" id="age" placeholder="Age">
        <br>
        <label for="location">Location</label>
        <input type="location" id="location" placeholder="Location">
        <br>
        <button type="submit">Submit</button>
    </form>

Answer 1

这是一个带有输入参数的 JavaScript 函数。它将使用正则表达式检查输入值中是否包含数字字符。如果是，它会发送警报，然后删除所有数字字符(再次使用正则表达式)。然后它将检查输入值是否为空字符串，如果是则发送警报。

function checkName(input) {

    // Check if input contains a digit
    if (/\d/.test(input.value)) {
        alert('Name contains a number');

        // Remove all digit characters
        input.value = input.value.replace(/\d/gi, '');
    }

    // Check if input is empty
    if (input.value === '') {
        alert('Name is empty');
    }

    return true;
}​

将函数调用添加到输入的 onChange 属性，传入 this 对象作为函数的变量引用:

    <input type="text" id="name" placeholder="Name" onChange="checkName(this)" >

这是一个展示此工作原理的演示:
http://jsfiddle.net/PMKsS/1/

有一点需要注意。仅当名称输入值更改时才会调用此函数，因为 onChange 调用将执行此操作。因此，表单提交时不会检查名称输入是否为空。

此外，这值得一读:Why is using onClick() in HTML a bad practice? 。它解释了如何通过 javascript 而不是通过属性添加 javascript 事件监听器，以及为什么采用其他方式并不好。尽管它没有提供在纯 JavaScript 中执行此操作的方法。