<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> .bt1{margin: 10px 30px;} </style> <script type="text/javascript"> function fun(){ } function checkUsername(){ } function checkPwd(){ } function checkEmail(){ } </script> </head> <body> <form> 用户名:<input type="text" id="username"><br> 密 码:<input type="text" id="pwd"><br> 邮 箱:<input type="text" id="email"><br><br> <input type="submit" id="submit" class="bt1"> <input type="reset" id="reset"><br> </form> </body> </html>
时间: 2023-10-25 09:08:55 浏览: 91
HTML绿色食品网站页面
好的,那么以下是一个基本的表单验证代码,包括非空验证和正则表达式验证,您可以根据需要进行修改和补充:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
.bt1{margin: 10px 30px;}
</style>
<script type="text/javascript">
function fun(){
if(checkUsername() && checkPwd() && checkEmail()){
return true;
}
else{
return false;
}
}
function checkUsername(){
var username = document.getElementById("username").value;
if(username == ""){
alert("用户名不能为空!");
return false;
}
else{
return true;
}
}
function checkPwd(){
var pwd = document.getElementById("pwd").value;
if(pwd == ""){
alert("密码不能为空!");
return false;
}
else{
return true;
}
}
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(email == ""){
alert("邮箱不能为空!");
return false;
}
else if(!reg.test(email)){
alert("邮箱格式不正确!");
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return fun();">
用户名:<input type="text" id="username"><br>
密 码:<input type="password" id="pwd"><br>
邮 箱:<input type="text" id="email"><br><br>
<input type="submit" id="submit" class="bt1">
<input type="reset" id="reset"><br>
</form>
</body>
</html>
```
其中,onsubmit="return fun();" 表示当提交表单时调用 fun() 函数进行验证。
阅读全文