Question

function validateWieslid() {

var countnummer = $("nummer").val().length;
var countpin = $("pin").val().length;

if (countnummer.length < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
 } 
if (countpin.length < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
 } 
}

这是我的JavaScript函数

            <div id="wies">
                <label>Lidnummer:</label> 
                <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
                <label>WIES pin:</label> 
                <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
           </div>

     <div id="lrError"></div>
     <div id="pinError"></div>

这是我的HTML代码，

id =“nummer”的输入应该是6个字符长的输入，id =“pin”的输入应该是一个引脚号，所以它的4个字符长。

我正在努力使它在输入长度低于6时显示JavaScript中显示的文本，但是这不能使它工作吗？我是一个初学者，这可能是一个非常简单的解决方案，但我想要一些帮助！谢谢:)）

Answer 1

要从ID中访问元素，您应该在ID名称之前使用＃。例如，访问以下元素 -

<input name="lidnummer" size="30" type="text" id="nummer" maxlength="6">

我会用

$("#nummer")

方法validateWieslid()的前两行不起作用。它应该是 -

var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;

正确的代码是 -

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
var flag = true;
if (countnummer < 6) { 
    document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
    document.getElementById("lrError").style.backgroundColor = "red";
    flag = false;
 } 
if (countpin < 4) { 
    document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
    document.getElementById("pinError").style.backgroundColor = "red";
    flag = false;
 } 
 return flag;
}

假设您的HTML代码是 -

   <div id="wies">
        <form id="myForm" action="">
        <label>Lidnummer:</label> 
        <input name="lidnummer" size="30" type="text" id="nummer" maxlength="6"><br>
        <label>WIES pin:</label> 
        <input name="pin" size="30" type="text" id="pin" maxlength="4"><br>
        <input type="submit" value="submit"/>
        </form>
   </div>

现在，您可以使用 -

将函数与表单提交事件绑定

$("#myForm").submit(function( event ) {
  if(!validateWieslid())
  event.preventDefault();
});

Answer 2

我更新了小提琴以删除jquery依赖

http://jsfiddle.net/SJJvk/2/

function validateWieslid() {
var countnummer = document.getElementById("nummer").value.length;
var countpin = document.getElementById("pin").value.length;

if (countnummer < 6) { 
  document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
  document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
  document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
  document.getElementById("pinError").style.backgroundColor = "red";
 } 
}

以下现在已弃用：

您的代码存在一些问题。

这是一个jsFiddle http://jsfiddle.net/SJJvk/

1）你没有触发你的功能。 2）你错过了jQuery调用错误div的＃ 3）你的变量是实际数字，不需要测试长度，

function validateWieslid() {
var countnummer = $("#nummer").val().length;
var countpin = $("#pin").val().length;
console.log("cn is " + countnummer);
console.log("cn is " + countpin);

if (countnummer < 6) { 
document.getElementById("lrError").innerHTML = " Lidnummer moet 6 cijfers lang zijn.";
document.getElementById("lrError").style.backgroundColor = "red";
} 
if (countpin < 4) { 
document.getElementById("pinError").innerHTML = " Pin moet 4 cijfers lang zijn.";
document.getElementById("pinError").style.backgroundColor = "red";
} 
}

想要计算输入长度，当低于6时显示错误

2 个答案:

以下现在已弃用：