在 HTML5 中表单 <form>
的 action属性指定了表单提交目标位置,但是希望在提交(submit)之前进行简单的表单输入合法性验证,直接使用javascript在前端进行就行,此时可以使用javascript提供的onsubmit
方法来实现:
这里写代码片
<form id="registerForm" action="registerServlet" onsubmit="return checkRegister()" method="post">
<h3><strong>加入我们</strong></h3>
<input type="text" name="userName" id="userName" placeholder="请输入用户名" />
<input type="email" name="email" id="email" placeholder="Email" />
<input type="password" name="password" id="password" placeholder="密码" />
<input type="password" name="password_Comfirm" id="password_Comfirm" placeholder="请再次输入密码" />
<input type="submit" name="submit" value="注册" />
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function checkRegister(){
// 1. input: userName
if ($("#userName").val() == ""){
alert("1 请输入用户名");
$("#userName").focus();
return false;
}
// 2. input: password
if ($("#password").val() == ""){
alert("2 请输入登录密码");
$("#password").focus();
return false;
}
// 3. input: password_Comfirm
if ($("#password_Comfirm").val() != $("#password").val()){
alert("3 确认密码不正确!");
$("#password_Comfirm").focus();
return false;
}
// 4.1. input: email
var myemail = $("#email").val();
if (myemail == ""){
alert("4 请输入用户邮箱!");
$("#email").focus();
return false;
}
// 4.2. input: email
if (myemail.indexOf("@")<1 || myemail.lastIndexOf(".")<2){
alert("5 邮箱格式有误!");
$("#email").focus();
return false;
}
return true;
}
以下是一点深入地探讨和可能会碰到的问题:
<form>
表单中type=submit
与javascript方法onsubmit的逻辑关系为什么Eclipse编辑器中的html/jsp文件的
<form>
标签里写的onsubmit="return validate()"
会报错?
写博不易,转载请注明来源:http://blog.csdn.net/dachylong
若文章存在错误之处,请大家不吝赐教!