<Java Web学习初级阶段>JavaScript实现注册页面的表单验证

最新推荐文章于 2025-06-11 21:11:49 发布

原创

最新推荐文章于 2025-06-11 21:11:49 发布 · 9.5k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #代码 #javascript #java web

这篇博客展示了如何使用JavaScript实现一个Java Web应用的注册页面表单验证。内容包括验证用户名、密码、确认密码、邮箱、验证码以及性别选择，确保用户输入符合规定格式。通过函数如`checkUserName`, `checkPassword`等进行验证，并用`shouWarn`显示错误提示。" 78827900,7419705,SSH整合初探：Spring+Struts2+Hibernate实战,"['Spring框架', 'Struts2框架', 'Hibernate框架', '数据库集成', 'JavaEE']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script>
//初始化页面
function initform(){
//第一个文本框获取焦点
//document.getElementById("username").focus();
//产生验证码
getCode();
}
//产生验证码
function getCode(){
var code = String(Math.round(Math.random()*10000));
while(code.length<4){
code = "0"+code;
}
document.getElementById("newcode").value=code;
}
//剔除空格
function trim(){
return this.replace(/(^s*)|(s*$)/g, "");
}
//显示错误提示
function shouWarn(uid,msg){
document.getElementById(uid).innerHTML=msg;
document.getElementById(uid).style.display="";
}
//清空错误提示
function clearWarn(uid){
document.getElementById(uid).style.display="none";
}
//检验验证码
function checkCode(code,uid){
var checkcode = document.getElementById("newcode").value;
if(checkcode==code){
var msg="√√√√√";
shouWarn(uid,msg)
return (true);
}else{
msg="验证码输入错误！";
shouWarn(uid,msg);
return (false);
}
}
//验证用户名
function checkUserName(usename,uid){
var uName = usename.trim();
var reg1 = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/;
if(reg1.test(uName)==true){
var msg="√√√√√";
shouWarn(uid,msg)
return (true);
}else{
msg="用户名输入不规范！";
shouWarn(uid,msg);
return (false);
}
}
//验证密码
function checkPassword(password,uid){
var pwd = password.trim();
var reg2 = /^[a-zA-Z0-9]{6,20}$/;
if(reg2.test(pwd)==true){
var msg="√√√√√";
shouWarn(uid,msg);
return (true);
}else{
msg="密码输入不规范！";
shouWarn(uid,msg);
return (false);
}
}
//验证确认密码
f