Question

我遇到了通过javascript更改范围文本的问题。我试图在提交错误输入时出现错误消息。我该如何解决这个问题？

        function SubmitFunc() {
            var studentNameInput = document.getElementById("student-name");
            CheckInputLetters(studentNameInput);

        }
        function CheckInputLetters(input) {
            if (!/^[a-zA-Z_ ]+$/.test(input.value)) {
                document.getElementById("name-error").innerHTML = "error";
            }
        }

    <label class="data-lbls data-titles-dec">FullName</label>
    <input class="input-style" type="text" id="student-name" placeholder="Enter Full Name" />
    <span id="name-error" style="float:right;"></span>

Answer 1

它是关于包含表单标记和提交输入。当提交输入刷新页面时，所有更改都会重置。我将type="submit"更改为type="button"。现在它可以工作

Answer 2

luisenrike，这是因为OP没有包含所有相关内容。尽管我们的答案都是正确的，但背景有限。

Answer 3

如果提交表单，页面将重新加载，您将看不到更改（错误消息）。如果存在任何验证错误，您可以使用函数的返回值来阻止表单提交：

function SubmitFunc() {
  var studentNameInput = document.getElementById("student-name");
  return CheckInputLetters(studentNameInput);
}

function CheckInputLetters(input) {
  if (!/^[a-zA-Z_ ]+$/.test(input.value)) {
    document.getElementById("name-error").innerHTML = "error";
    return false; // error
  }
  return true; // no error
}

<form id="some" onsubmit="return SubmitFunc()">
  <label class="data-lbls data-titles-dec">FullName</label>
  <input class="input-style" type="text" id="student-name" placeholder="Enter Full Name" />
  <span id="name-error" style="float:right;"></span>
  <button type="submit">Send</button>
</form>

Answer 4

您需要通过输入字段中的onblur之类引用该方法：

＆＃13;

        function SubmitFunc() {
            var studentNameInput = document.getElementById("student-name");
            CheckInputLetters(studentNameInput);
        }
        function CheckInputLetters(input) {
            if (!/^[a-zA-Z_\s]+$/.test(input.value)) {
                document.getElementById("name-error").innerHTML = "error";
            }
        }

＆＃13;

    <label class="data-lbls data-titles-dec">FullName</label>
    <input class="input-style" onblur="SubmitFunc();" type="text" id="student-name" placeholder="Enter Full Name" />
    <span id="name-error" style="float:right;"></span>

＆＃13;

用js改变跨度文本

4 个答案: