使用JavaScript进行表单验证时出现问题

时间:2010-01-14 10:59:17

标签: javascript html jsp

根本没有调用editvalidate()函数:

请说明原因。什么是补救措施?

<script type="text/javascript">

 function editvalidate() {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  var numericExpression = /^[0-9]+$/;


    if(document.editprofile.userid.value == '' || document.editprofile.password.value == ''||document.editprofile.name.value == ''||document.editprofile.age.value == ''||document.editprofile.collegeid.value == ''||document.editprofile.mobile.value == ''||document.editprofile.address.value == ''||document.editprofile.department.value == ''||document.editprofile.email.value == ''||document.editprofile.sec_ques.value == ''||document.editprofile.answer.value == ''){
      alert("Hey! you can't left a field blank!");
      return false;
     }
     else if(!document.editprofile.email.value.match(emailExp)){
     alert("You need to enter a valid email address to get proper notifications!");
      return false;

     }  else if(!document.editprofile.mobile.value.match(numericExpression)){
     alert("Mobile numbers are all numeric digits i think!");
      return false;

     } else if(document.editprofile.mobile.value.length < 10){
     alert("Mobile number must be 10 digit long!");
      return false;

     }


     else{
      return true;
     }

 }






</script>

下面给出了表单,它用于从数据库中获取数据,并且自己用值填充。可编辑的条目被更正并且表单被提交。工作正常但没有得到验证cz,editvalidate()没有被调用总之。为什么?

<form name="editprofile" action="editprofile.jsp" method="post" onsubmit="return editvalidate();">

<table align="center">
 <%
  for(int i = 0; i < list.length ; i++){
 %>
 <tr>
  <td>Name:</td>
  <td><input type="text" name="name" size="35" style="width: 219px" value="<%=list[i].getName() %>" maxlength="25"></td>
 </tr>
 <input type="hidden" name="userid" size="20" style="width: 220px"
  value="<%=list[i].getUserid() %>" maxlength="10">
 <tr>
  <td>Address:</td>
  <td><input type="text" name="address" size="46"
   style="width: 221px" value="<%=list[i].getAddress() %>"
   maxlength="50"></td>
 </tr>
 <tr>
  <td>E-mail:</td>
  <td><input type="text" name="email" size="20"
   style="width: 220px" value="<%=list[i].getEmail() %>" maxlength="40"></td>
 </tr>
 <tr>
  <td>Age:</td>
  <td><input type="text" name="age" size="20" style="width: 219px"
   value="<%=list[i].getAge() %>" maxlength="2"></td>
 </tr>
 <tr>
  <td>College ID:</td>
  <td><input type="text" name="collegeid" size="20"
   style="width: 219px" value="<%=list[i].getCollegeid() %>"
   maxlength="10"></td>
 </tr>
 <tr>
  <td>Mobile:</td>
  <td><input type="text" name="mobile" size="20"
   style="width: 218px" value="<%=list[i].getMobile() %>" maxlength="10"></td>
 </tr>
 <tr>
  <td>Department:</td>
  <td><input type="text" name="department" size="20"
   style="width: 218px" value="<%=list[i].getDepartment() %>"
   maxlength="10"></td>
 </tr>
 <tr>
  <td>Security Question:</td>
  <td><input type="text" name="sec_ques" size="20"
   style="width: 218px" value="<%=list[i].getSec_ques() %>"
   maxlength="50"></td>
 </tr>
 <tr>
  <td>Answer:</td>
  <td><input type="text" name="answer" size="20"
   style="width: 218px" value="<%=list[i].getAnswer() %>" maxlength="50"></td>
 </tr>

 <tr>
  <td><input type="submit" name="operation" value="editprofile"
   style="width: 118px"></td>
  <td><input type="reset" value="Reset" name="B2"></td>
 </tr>

 <%
  }
%>

我按照你建议的方式检查了它,发现该功能正在被调用。但为什么其余警报可见?不是因为输入标签中的value属性

5 个答案:

答案 0 :(得分:1)

使用尽可能少的信息,我只能回答:运行Javascript调试器。我可以为您推荐Firebug

那就是说,将来请提出一个SSCCE代替不需要杂乱的代码。这样可以避免在搜索相关行的代码中长时间爬行,并且乍一看明显的问题是“它们是否在同一个文件中?”,“您是否添加alert('blah')作为第一行函数以查看它是否实际被调用?“,”浏览器是否启用了JS?“,”你确定你没有错误地输入函数名吗?“,”代码中是否还有更多内容可能会扰乱它?“,等等。

以下是此类SSCCE的基本示例:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2063598</title>
        <script>
            function validate(form) {
                alert('Validate method invoked!');
                return false;
            }
        </script>
    </head>
    <body>
        <form onsubmit="return validate(this)">
            <input type="text" name="foo" class="required">
            <input type="submit">
        </form>
    </body>
</html>

那就是说,我发现你仍然在JSP中使用遗留的 scriptlets 。如果可以,我强烈建议停止使用它并切换到taglibs / EL,为时已晚。原始Java代码属于Java类,而不属于JSP文件。

JSTL的基本示例(只需在/WEB-INF jstl-1.2.jar中删除c:forEach):

<table>
    <c:forEach items="${users}" var="user">
        <tr>
            <td><input type="text" name="address" value="${user.address}"></td>
            <td><input type="text" name="email" value="${user.email}"></td>
            <td><input type="text" name="college" value="${user.college}"></td>
        </tr>
    </c:forEach>
</table>

并将CSS保存在自己的CSS文件中,以便将样式与内容分开,并提高Web应用程序的性能和可维护性。

答案 1 :(得分:0)

你不是从你的html中调用它,你应该称之为<form onsubmit="return editvalidate();">

好的,现在我看到他正确地格式化了它,我不介意我有时给他们的票数。

@Robin Agrahari

你可能在javascript中有某个拼写错误没有人会去做它但是你,如果你像使用警报一样尝试逐个测试。但是不要在sumbit上做,创建一个模拟按钮,它将调用(点击)这个函数editvalidate();并彻底检查你的功能,你最终会遇到问题

答案 2 :(得分:0)

你怎么能说它没有被叫?我会在方法的顶部发出警报,看看它是否会发生。你有可能在某处遇到某种错误。如果未在editvalidate顶部发出警报,请尝试将obsubmit更改为:

onsubmit="alert('hello!'); return editvalidate();"
那么你至少应该看到“你好!”当您单击“提交”按钮时。

答案 3 :(得分:0)

查看应该调用的代码

或尝试

onsubmit="editvalidate(); return false;"

或者检查它没有放错位置,我的意思是javascript应该在&lt; head&gt;中&LT; /头&GT;

答案 4 :(得分:0)

实际上我在第一个if块document.editprofile.password.value ==''

中使用了密码检查参数

并且我从来没有在表单中使用过像密码这样的属性。这是我的错误,所以它没有工作。我发现它使用了firebug工具。谢谢你的帮助。