用js对前端form表单提交前进行验证

网站前端用js对表单进行提交验证:主要用onsubmit事件

对于Form表单内的onsubmit提交验证,
当返回值为true时,表单提交,返回值为false,阻断。

需要特别注意的是:
onsubmit可看做一个方法,方法可以有返回值,而true和false应作为返回结果,因此在书写此条语句时,应加上return,否则无法阻断form表单提交。

为空验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
    
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
    
</body>
</html>

E-mail 验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮件验证</title>
</head>
<head>
<script>
function validateForm(){
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
    }
}
</script>
</head>
<body>
    
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
    
</body>
</html>
未经允许不得转载:桔子雨工作室 » 用js对前端form表单提交前进行验证
分享到: 生成海报
一个数字化服务提供商

承接外贸建站,软件APP开发

部分产品联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码