如果 HTML 上的输入错误，如何显示错误消息

Question

我试图在输入字段旁边以红色显示错误消息以让用户知道，但是我不知道为什么我的错误消息不起作用。 输入要求以大写字母开头，后跟非特殊字符（任何字母）请帮我看看我的代码有什么问题

我还是 HTML 的新手，我知道很多人都说过正则表达式，但我不确定我还没有学过

<html>
<script>
function validateForm() {
    var fname = document.getElementById("fname").value; 
    if (/^[A-Z]\D{2,30}$/.test(fname) == false)
    {
        document.getElementById("errorName").innerHTML = "Your email must be filled"; 
        return false;
    {
    return name;
}
</script>

<style>
#errorName 
{
    color:red; 
}
</style>
<form action="handleServer.php" method="get" onSubmit="return validateForm()">
    <body>
        <!-- starting with first name--> 
        First name: </br>
        <input id="fname" type="text" name="fname" size="30"> 
        <span id="errorName"></br> 
        <input type="submit" value="Submit">
    </body>
</form> 
</html>

Answer 1

当我倾向于使用正则表达式时，我将其存储在自己的值中，如下所示：

const patternName = /[0-9]|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/|#]/;
let resultName = patternName.test(name.value);

上面的代码检查name包含上面正则表达式中的任何内容，如果包含，则resultName将返回true 。

接下来我们可以执行以下操作：

如果name为空，你会得到一个错误，它包含我们上面正则表达式中的任何内容。 在这种情况下，我们显示错误
如果resultName为true我们知道name包含正则表达式中的某些内容，因此它不是有效名称。
如果不是，我们会显示成功消息

if (name.value === "" || resultName) {
    showErrorName();
} else {
    showSuccessName();
}`

Answer 2

我看到你的 if 语句没有正确关闭，还有输入框。

请找codepan

    function validateForm() {
  console.log(1);
    var fname = document.getElementById("fname").value; 
    if (/^[A-Z]\D{2,30}$/.test(fname) == false)
    {
        document.getElementById("errorName").innerHTML = "Your email must be filled"; 
        return false;
    {
    return name;
}
    }
}

如果 HTML 上的输入错误，如何显示错误消息

问题描述

2 个解决方案

解决方案1
0 2020-10-19 07:50:17

解决方案2
0 已采纳 2020-10-19 08:09:10

如果 HTML 上的输入错误，如何显示错误消息

问题描述

2 个解决方案

解决方案1 0 2020-10-19 07:50:17

解决方案2 0 已采纳 2020-10-19 08:09:10

解决方案1
0 2020-10-19 07:50:17

解决方案2
0 已采纳 2020-10-19 08:09:10