2013-09-17 4 views
-1
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 
    <style type="text/css"> 
     *{ 
      font-family: cursive; 
     } 
     </style> 
     <script type="text/javascript"> 
      function validate() 
      { 
       var a = document.getElementById("a"); 
       var b = document.getElementById("b"); 
       var valid = true; 
       if(a.value.length<=0 || b.value.length<=0) 
        { 
         alert("Don't leave the field empty!"); 
         valid = false; 
        } 
        else{ 
         if(!IsNumeric(a.value) || !IsNumeric(b.value)) 
          alert("Enter a number"); 
        valid = false; 
       } 
       return valid; 
      }; 

     </script> 
</head> 
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold"> 



    <h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2> 
    <form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" > 
     <hr/> 
     Enter the 1st number: <input type="text" name="a" /><br/> 

     Enter the 2st number: <input type="text" name="b" /><br/><br/> 

     <label>Add</label><input type="radio" name="option" value="Add" /><br/> 

     <label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/> 

     <label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/> 

     <label>Divide</label><input type="radio" name="option" value="Divide" /><br/> 

     <input type="submit" value="Submit" /> 


    </form> 


</body> 

Форма проверки в JSP с использованием JavaScript

Это моя JSP и я написал функцию validate() JavaScript, который проверяет пользовательский ввод против пустого пространства и String. Моя проблема в том, что когда я нажимаю кнопку отправки, для правильного ввода целого числа, она работает. Если указан недопустимый ввод, я получаю пустую страницу. Может ли кто-нибудь помочь мне в решении проблемы и что я должен изменить? Благодарю.

ответ

5

В вашем javascript вы проверяете ID, но идентификатор для полей ввода отсутствует.

<input type="text" name="a" id ="a"/> 
<input type="text" name="b" id="b" /> 

, чтобы проверить, если входной строки или не использовать isNAN() как следующим образом

if(isNaN(a) || isNaN(b)){ 
alert("enter a number");} 

Ниже приводится полный рабочий пример

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 
    <style type="text/css"> 
     *{ 
      font-family: cursive; 
     } 
     </style> 
     <script type="text/javascript"> 
      function validate() 
      { 
       var a = document.getElementById("a"); 
       var b = document.getElementById("b"); 
       var c = document.getElementById("a").value; 
       var d = document.getElementById("b").value; 
       var valid = true; 
       if(a.value.length<=0 || b.value.length<=0) 
        { 
         alert("Don't leave the field empty!"); 
         valid = false; 
        } 
        else{ 
         if(isNaN(c) || isNaN(d)){ 
          alert("Enter a number"); 
        valid = false;} 
       } 
       return valid; 
      }; 
     </script> 
</head> 
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold"> 

    <h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2> 
    <form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" > 
     <hr/> 
     Enter the 1st number: <input type="text" name="a" id="a" /><br/> 

     Enter the 2st number: <input type="text" name="b" id="b" /><br/><br/> 

     <label>Add</label><input type="radio" name="option" value="Add" /><br/> 

     <label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/> 

     <label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/> 

     <label>Divide</label><input type="radio" name="option" value="Divide" /><br/> 

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

2

Поправьте меня, если я ошибаюсь, но ваш Javascript функция ищет «а» и «б» идентификаторами И у вас нет таких ... ваши входные элементы получили имена. добавить идентификаторы атрибутов ...

+0

Мой плохо. Я добавил идентификатор сейчас. Но все же, когда я отправляю все, что получаю, это пустая страница! –

Смежные вопросы