用JS验证表单数据时的提交问题

来源：互联网发布：广数车床g73编程实例编辑：程序博客网时间：2024/06/07 06:01

对于表单的验证通常用js来完成，通过一个方法来接受form对象，在这个方法中对form中的数据进行判断。

通常我们的需求是若验证通过则提交表单，若验证不通过则不提交表单数据，给出错误提示信息。

下面用一个简单的注册表单验证来描述一下具体的代码（用原汁原味的js来完成）

js代码：

//验证邮箱格式function checkemail(email){var str = email;var Expression =  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;var objExp = new RegExp(Expression);if(objExp.test(str)==true){return true;}else{return false;}}//验证表单数据的格式function checkForm(form){if(form.account.value==""){window.alert("请输入用户登录昵称");return false;}if(form.account.value.length < 3 || form.account.value.length > 8){window.alert("用户登录昵称长度应在3~8之间");return false;}if(form.password.value==""){window.alert("请输入密码");return false;}if(form.password.value.length < 3 || form.password.value.length > 8){window.alert("密码长度应在3~8之间");return false;}if(form.repassword.value != form.password.value){window.alert("两次输入密码不一致");return false;}if(form.email.value==""){window.alert("请输入邮箱");return false;;}if(!checkemail(form.email.value)){window.alert("您输入的邮箱格式不正确");return false;;}return true;}

前端页面代码：

<html>  <head>    <title>用户注册</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/rl.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/rl.js"></script>    <script type="text/javascript">              var pform = function(){                   var form = document.forms[0];                   var result = checkForm(form);                   if(result==true){                      <span style="color:#FF0000;"> form.submit();</span>                   }   </script>  </head>  <body>      <div id="regist">          <<span style="color:#FF0000;">form name="reg" action="/rl/regist"</span> method="post"> 账号:<input type="text" name="account" value="${error.account}"/><a style="color: red">${error.errorMessage.account}</a><br> 密码:<input type="password" name="password" value="${error.password}"/><a style="color: red">${error.errorMessage.password}</a><br> 确认密码:<input type="password" name="repassword" value="${error.repassword}"/><a style="color: red">${error.errorMessage.repassword}</a><br> E-mail:<input type="text" name="email" value="${error.email}"/><a style="color: red">${error.errorMessage.email}</a><br> 提示问题:<input type="text" name="question" value="${error.question}"/><a style="color: red">${error.errorMessage.question}</a><br> 答案:<input type="text" name="result" value="${error.result}"/><a style="color: red">${error.errorMessage.result}</a><br><br>              <input type="reset" value="重置"/>              <input type="button" value="注册" <span style="color:#FF0000;">onclick="pform()</span>"/>         </form>      </div>      </body></html>

0 0