0 
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" 的输入应该是一个 pin 号，所以它的 4 个字符长。

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

4

2 回答 2

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();
});
于 2013-10-17T18:54:16.970 回答
0

我已经更新了小提琴以删除 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）您在调用错误 div 的 jQuery 中缺少 # 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";
} 
}
于 2013-10-17T19:00:36.220 回答