Question

这是我的.js功能

function validateSNo(inputtxt,elem){
            var SNoFormat = /^\d{6}$/;
            if (SNoFormat.test(inputtxt)){
                document.getElementById(elem).innerHTML = "";
                return true;
            }
            else {
                document.getElementById(elem).innerHTML = "This should only contain 6 numbers XXXXXX";
                return false;
            }

这是html代码

<label>Student No.</label>
                            <input type="text" name="sNo" size="6" maxlength="6" onblur="return validateSNo(document.FormStuReg.sNo.value,sNo-validation)" autofocus><span class="errorMsg">*</span>
                            <br>
                            <span class="errorMsg" id="sNo-validation"></span>

我想在检测到无效输入时在跨区域中显示验证消息。这段代码无法正常工作。当函数写成这样的函数时，没有参数就可以正常工作。

function validateSNo(){
        var SNoFormat = /^\d{6}$/;
        if (SNoFormat.test(document.FormStuReg.sNo.value)){
          document.getElementById("sNo-validation").innerHTML = "";
          return true;
        }
        else {
          document.getElementById("sNo-validation").innerHTML = "This should only contain 6 numbers XXXXXX";
          return false;
        }
      }

我必须在其他几个地方使用相同的验证，所以如果我可以将值作为参数传递给单个函数，或者我必须使用不同的元素id再次在n上写相同的函数，它会更好。

Answer 1

查看HTML中的onblur属性。

onblur="return validateSNo(document.FormStuReg.sNo.value,sNo-validation)"

请注意，sNo-validation不在引号中。这意味着它被解释为两个变量：sNo和validation，它们是未定义的，-被解释为减号。减去两个未定义的变量是没有意义的，这就是你得到错误的原因。

只需添加引号即可。因为它已经在引号内，因为它是HTML属性，所以请使用单引号。

onblur="return validateSNo(document.FormStuReg.sNo.value, 'sNo-validation')"

Answer 2

BTW，因为您使用的方案如 sNo 和 sNo-validation ，所以您无需传递ID。我猜测document.FormStuReg.sNo.value是监听器所在的输入，因此您只需使用 this 传递对该元素的引用：

<input ... name="sNo" ... onblur="return validateSNo(this)" ... >

然后在函数中：

// element will reference the input
function validateSNo(element){
    var SNoFormat = /^\d{6}$/;

    if (SNoFormat.test(element.value)){

      // Use the element name to get the message element
      document.getElementById(element.name + "-validation").innerHTML = "";
      return true;
    }
    else {
      document.getElementById(element.name + "-validation").innerHTML = "This should only contain 6 numbers XXXXXX";
      return false;
    }
  }

和 if..else 可以使用conditional ? : operator：

   document.getElementById(element.name + "-validation").innerHTML = SNoFormat.test(element.value)? '' : 'This should only contain 6 numbers XXXXXX';

从侦听器返回true或false无效。

如果你更进一步，你可以定义验证以在类值或 data - 属性中运行，然后你不需要传递任何东西。只需根据类或数据 - 值验证所有表单控件。

传递元素id作为参数

2 个答案: