如何在Javascript中正确验证两个或多个字段?

时间:2017-03-29 18:26:42

标签: javascript validation

我想使用JavaScript代码一起验证2个字段。 我正在做的是在用户输入无效数据时禁用提交按钮。

这样的事情:

Disabled Button when incorrect data is entered

问题是,当我在字段1中输入无效数据时,按钮被禁用但是当我在第二个字段中添加正确的表单数据时,按钮再次启用,我甚至使用了全局变量,但问题仍然存在。

Button enabled even if data in first field is wrong

我的JavaScript代码是:

<script>
var sw=0;
function valqid(qid){

 if(isNaN(qid) || parseInt(qid)<0){
  alert("Please Enter Valid Question ID!");
  document.getElementById("button").disabled = true;
  window.sw=1; 
 }
 else{
  if(window.sw==0){
  document.getElementById("button").disabled = false;
 }
 }


}

function valans(ans){

 if(parseInt(ans)!=0 && parseInt(ans)!=1){
  alert("Please Enter Valid Answer!");
  document.getElementById("button").disabled = true;
  window.sw=1; 
 }
 else{
  if(window.sw==0){
  document.getElementById("button").disabled = false;
 }
 }


}
</script>

此处qid和ans是用户输入的值。

请告诉我如何使其正常工作。 (验证规则在下面的图像文件中列出)

提前致谢。

完整代码HTML如下:

<html>
 <body> 
  <center> 
   <form action="add_questions.php" method="POST" name="form4"> <br /> <br />
    <table cellspacing="10" cellpadding="10" border="1">
     <tr> <th> Question ID </th> <th> Question </th> <th> Answer </th> </tr>
     <tr> <td> <input type="text" name="question_id" maxlength="3" minlength="1" onchange="valqid(this.value)" required /> </td> <td> <input type="text" name="question" maxlength="200" minlength="10" id="ques" required /> </td> <td> <input type="text" name="answer" maxlength="1" onchange="valans(this.value)" required /> </td> </tr>
    </table> <br /> <br />
    <input type="submit" value="Add Question" name="add_question" id="button" />
   </form> <br /> <br />
  <p> * Enter Question Id, Question & Answer of the question you want to add. </p>
  <p> * All three are mandatory fields (cannot be empty). </p>
  <p> * Question Id can be 3 numbers (Whole Numbers only) long at most and should be atleast 1 number (character).</p>
  <p> * Question can be 200 characters long at most and should be atleast 10 characters. </p>
  <p> * Answer field should be '1' for 'True' & '0' for 'False'.</p>
  <p> * Question Id must be unique.</p>

<script>
var sw=0;
function valqid(qid){

 if(isNaN(qid) || parseInt(qid)<0){
  alert("Please Enter Valid Question ID!");
  document.getElementById("button").disabled = true;
  window.sw=1; 
 }
 else{
  if(window.sw==0){
  document.getElementById("button").disabled = false;
 }
 }


}

function valans(ans){

 if(parseInt(ans)!=0 && parseInt(ans)!=1){
  alert("Please Enter Valid Answer!");
  document.getElementById("button").disabled = true;
  window.sw=1; 
 }
 else{
  if(window.sw==0){
  document.getElementById("button").disabled = false;
 }
 }


}
</script>




 </body>
</html> ; 

1 个答案:

答案 0 :(得分:0)

您可以使用这种简单的方式

<script>
function valqid(qid){
 if(isNaN(qid) || parseInt(qid)<0){
  alert("Please Enter Valid Question ID!");
  document.getElementById("button").disabled = true;
 }
 else if(parseInt(ans)!=0 && parseInt(ans)!=1){
  alert("Please Enter Valid Answer!");
  document.getElementById("button").disabled = true;
  }
 else{
     document.getElementById("button").disabled = false;
  }
 }
</script>