网站前端用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>