大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
最近学习HTML表单，感慨万千。虽然看起来好像不难学，但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面，只有“注册账号、密码、重输密码”三个文本框，还包含了原生JavaScript验证。（记一下，也希望能给有需要的人一点帮助。）
下面直接上代码，已测试可运行，有问题可留言。
虽然看起来代码一大段，但是主要内容不多——简单的表单内容、然后是js验证，而且是分开验证，应该比较容易懂，结合注释应该可以理解，这里就不详解了。
<!DOCTYPE html>
<html>
<head>
<title>8_常用注册页面的表单实例（含验证）.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body{
background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg);
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed; /*此条属性必须设置否则可能无效*/
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #CCCCCC;
}
#user_reg{
font-family: 微软雅黑;
font-size: 40px;
text-align: center;
margin-top: 200px;
}
form{
width: 500px; /*设置宽度，方便使其居中*/
margin: 40px auto auto auto; /*上右下左*/
font-size: 25px;
}
input{
height: 30px;
width: 12em;
margin-top: 5px;
margin-bottom: 5px;
}
/*input标签下的属性选择器*/
input[type="submit"],input[type="reset"]{
height: 25px;
width: 5em;
margin-top: 5px;
margin-left: 6px;
}
</style>
</head>
<script type="text/javascript">
//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：
//函数1：验证邮箱格式
function validate_username(username){
//定义正则表达式的变量:邮箱正则
var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//console.log(username);
if(username !="" && username.search(emailReg) != -1)
{
document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
}else{
document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
}
}
//函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成：
function validate_password(password){
//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
//测试密码：12345y
var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
if(password != "" && password.search(passwordReg) != -1)
{
document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
}else{
document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
alert("密码有6位，由数字和字母组成!");
}
}
//函数3：验证两次输入的密码是否一样
function validate_password2(password2){
var password = document.getElementById("password").value;
//测试：console.log(password);
//测试：console.log(password2);
if (password == ""){
document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";
}else if(password==password2){
document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";
}else{
document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";
console.log("密码有6位，由数字和字母组成!");
}
}
//函数4：验证表单是否已经填好
function validate_form(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
//console.log("表单填写正确，可以正常提交！");
//这三个，如果任何一个有问题，都返回false
//18128@qq.com 12345y
var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
if(username != "" && emailReg.test(username)){
if(password !="" && passwordReg.test(password)){
if(password2==password){
alert("信息填写正确，可以正常提交！");
console.log("信息填写正确，可以正常提交！");
return true;
}else{
alert("密码不一致，提交失败，请重新填写！");
console.log("密码不一致，提交失败，请重新填写！");
return false;
}
}else{
alert("密码格式错误，提交失败，请重新填写！");
console.log("密码格式错误，提交失败，请重新填写！");
return false;
}
}else{
alert("注册的账号不符合要求，提交失败，请重新填写！");
console.log("注册的账号不符合要求，提交失败，请重新填写！");
return false;
}
}
</script>
<body>
<div id="user_reg">用户注册:</div>
<form action="./servlet/RegisterServlet" method="post" name="form" >
<table>
<tr>
<td>请输入账号：</td>
<td><input type="text" id="username" name="username" placeholder="只能用邮箱注册" onblur="validate_username(this.value)"/></td>
<td id="test_user"></td>
</tr>
<tr>
<td>请输入密码：</td>
<td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成" onblur="validate_password(this.value)"/></td>
<td id="test_pw"></td>
</tr>
<tr>
<td>请确认密码：</td>
<td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)" /></td>
<td id="is_test_pw"></td>
</tr>
<tr>
<td></td>
<td ><input type="submit" id="submit_form" value="注册" onclick="return validate_form()"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>放几张效果图吧：
![HTML简单注册界面——含表单验证[通俗易懂]](https://img-blog.csdnimg.cn/20181028144028168.jpg)
![HTML简单注册界面——含表单验证[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
![HTML简单注册界面——含表单验证[通俗易懂]](https://img-blog.csdnimg.cn/2018102814411329.jpg)
![HTML简单注册界面——含表单验证[通俗易懂]](https://img-blog.csdnimg.cn/20181028144132339.jpg)
2019年9月25日更新：
修改背景为在线图片，添加测试地址：https://codepen.io/yansheng836/pen/aboMEmb
截图：
![HTML简单注册界面——含表单验证[通俗易懂]](https://img-blog.csdnimg.cn/20191027092352429.jpg)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/213552.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
