Question

这是我哥哥的问题文件中的一个问题，我试图解决，但我无法解决。

创建一个包含两个文本字段和单选按钮以及提交按钮的表单。命名文本字段帐号和金额以及单选按钮作为交易（存款，取款。查询）。写一个JavaScript验证文本字段只有数字，第一个文本字段的大小应为10，第二个文本字段的值应为500到 20,000。使用onclick事件调用jQuery来执行必要的事务和显示更新的值。

............................................... ..............................

所以我写了以下代码：

form1.html

<!DOCTYPE html>
<html>

<head>
<title>Web Tech DA 1</title>
<script type="text/javascript" src="script1.js">
</script>

<script type="text/javascript">

$(document).ready(function(){
    $('#sub').click(function() {
        var acc=document.getElementById("acc").value;
        var amt=document.getElementById("amt").value;
        var bal=acc%100;//balance , I am using this to dynamically generate a new balance each time a new account number is entered

        $("#t1").click(function(){
            bal=acc+amt;
            alert(bal);
        });

        $("#t2").click(function(){
        if(acc>amt){
            bal=acc-amt;
            alert(bal);
        }
        else{
            alert('Insufficient Funds.');
        }
        });

        $("#t3").click(function(){
        alert(bal);
        });

}); 



});    
</script>
</head>

<body>
    <form  name="myform" onsubmit="if(validateform()) {window.alert('succefully submitted')} else {return false;}" >

        <p>Account Number : <input type="text" maxlength="10" name="acc" id="acc" height="20px" width="100px" required="required" onblur="validacc(this.value)"></p>

        <p>Amount : <input type="text" name="amt" id="amt" height="20px" width="100px" required="required"  onblur="validamt(this.value)"></p>

       <p>Transaction : <input type="radio" name="trans" id="t1" value="deposit" />Deposit
                        <input type="radio" name="trans" id="t2" value="withdraw" />Withdraw
                        <input type="radio" name="trans" id="t3" value="enquiry" />Enquiry </p>

        <input type="submit" name="sub" id="sub" value="Submit">
    </form>
</body>

main1.css

*{
    margin:0;
    padding: 0;
}

body{
    margin: 25px;
}

form p {
    margin: 10px;
}

form input {
    margin: 10px;
}

script1.js

function validateform() {
var acc = document.getElementById("acc").value.trim();
var amt = document.getElementById("amt").value.trim();

if(validregno(acc)&&validname(amt))
    {window.alert("No errors found");return true;}
else
    {window.alert("invalid entries found");return false;}
}
// Overall Go

function validacc(r)
{
     var p = new RegExp(/^[0-9]{10}$/i);
    if(!p.test(r))
    {
        chngborder("acc");
        return false;
    }
    chngborderr("acc");
    return true;
}
function validamt(amt)
{
     var p = new RegExp( /^[0-9]{1,}$/);
    if(amt>=500 && amt<=20000){
        if(p.test(n))
        {
            chngborderr("amt");
            return false;
        }
        else
        {
            chngborder("amt");
            return true;
        }

    }
    chngborder("amt");
    return false;
}


function chngborder(i)
{
     document.getElementById(i).style.borderColor="red";
}//red color means wrong format
function chngborderr(i)
{
     document.getElementById(i).style.borderColor="green";
}//green color means correct format

出于某种原因，我无法在＆＃34; Amount＆＃34;中输入数字。文本字段，没有任何单选按钮正在工作。

请指出我在这里所犯的任何错误。

P.S。我是jQuery和表单验证的新手

更新

我指出了更改，即便如此，由于某种原因，＆＃34;金额＆＃34;文本字段未经过验证，并且“提交”＃34;按钮重置表单。

Answer 1

我正在分析你的代码。如果这正是你所拥有的，我可以注意到这一点 1 - 你没有包含jQuery库。您可以在<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>元素

中添加<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>或<head>来完成此操作

2 - 我认为最好在onsubmit #myForm事件中添加和Else if（validateform（））window.alert（'成功提交'）;否则返回false。

3 - 我从未见过以int开头的javascript（.js文件）变量声明：无论变量的类型是什么，它们都以var关键字开头

Answer 2

这是一个有效的代码。

  script1.js

 function validateform() {
 var accValue = document.getElementById("acc").value.trim();
 var amtValue = document.getElementById("amt").value.trim();

 if (validacc(accValue) && validamt(amtValue))
 { window.alert("No errors found"); return true; }
  else
 { window.alert("invalid entries found"); return false; }
}
 // Overall Go

   function validacc(r) {
   var p = new RegExp(/^[0-9]{10}$/i);
  if (!p.test(r)) {
    chngborder("acc");
    return false;
 }
  chngborderr("acc");
 return true;
}
 function validamt(amt) {
 var p = new RegExp(/^[0-9]{1,}$/);
 var amtValue = document.getElementById("amt").value;
 if (amtValue >= 500 && amtValue <= 20000) {
    if (p.test(n)) {
        chngborderr("amt");
        return false;
    }
    else {
        chngborder("amt");
        return true;
    }

}
chngborder("amt");
  return false;
 }


  function chngborder(i) {
  document.getElementById(i).style.borderColor = "red";
  }//red color means wrong format
   function chngborderr(i) {
   document.getElementById(i).style.borderColor = "green";
   }

  //Script inside your html file
            $(document).ready(function () {
        $('#sub').click(function() {
            var accValue = document.getElementById("acc").value;
            var amtValue = document.getElementById("amt").value;
            var bal = accd % 100;})

    $("#t1").click(function(){
        bal = Number(document.getElementById("aac").value) +   
    Number(document.getElementById("amt").value);
        alert(bal);
    });

    $("#t2").click(function(){
    if(acc > amt){
        Number(document.getElementById("aac").value) +
    Number(document.getElementById("amt").value);
        alert(bal);
    }
    else{
        alert('Insufficient Funds.');
    }
    });


   });

如果条件不能在表单验证中工作

更新

2 个答案: