使用JS完成注册页面表单简单校验

最新推荐文章于 2024-07-03 20:05:58 发布
最新推荐文章于 2024-07-03 20:05:58 发布
阅读量3.2k 收藏 8
点赞数
分类专栏： JavaScript 文章标签： JS实现表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SO_zxn/article/details/79132421
版权

首先看下结构目录：








此处只是用到了目录：img和01_使用JS完成注册页面表单校验.html代码，如果拷贝下来代码运行发现无图片是因为这里没上传对应图片，这个不影响学习

由于只是前端校验，没有涉及后端验证，所以并无与后端交互，只用了HBuilder工具开发

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空!");
return false;
}

/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}

/**校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}

/*校验邮箱*/
var eValue = document.getElementById("eamil").value;

                               //此处邮箱的正则表达式为：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/，

                              //可以从网上下载找其他的正则表达式
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}

}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font size="5" color="white">首页</font>
</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">手机数码</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">电脑办公</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">鞋靴箱包</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->

                                        //注意此处οnsubmit="return checkForm()必须写在<form ></from>标签里
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER 
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg"  width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有 
</p>
</td>
</tr>
</table>
</body>
</html>

黑夜无路人
关注
专栏目录
js对注册页面的简单验证
yunxuanting的专栏
08-12 2324
js语言 function tname(){ var name=document.getElementById("userName").value; var nullname=document.getElementById("nullname"); if(name==null||name==""){ nullname.innerHTML="用户名不能为空！"
一个简单的带有javascript验证的注册页面
02-09
一个简单的带有javascript验证的注册页面
JS（JavaScript）数据校验 表单校验-案例
最新发布
分享式获得也是一种学习的态度
07-03 1240
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 今人不见古时月，今月曾经照古人。 古人今人若流水，共看明月皆如此。 ——《把酒问月·故人贾淳令予问之》 文章目录JS（JavaScript）数据校验 表单校验-案例1. 目的2. 实现3. 案例演示3.1 预览效果3.2 示例代码3.3 示例代码演示3.4 示例代码下载 JS（JavaScript）数据校验 表单校验-案例
表单验证--用户注册页面
qq_45580938的博客
09-03 2037
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ border: 3px solid red ; width: 600px; ...
注册页面的js验证
.net 技术专栏
03-28 1609
<br />程序效果地址：http://product.e-works.net.cn/CompanyRegister.aspx<br />js 代码如下：<br />// 回调返回的消息<br />var CALLBACK_MESSAGE_CAN = '可以' ;     // 正常的<br />var CALLBACK_MESSAGE_NOT = '不可以' ;        // 文件未找到<br /> //消除前后空格和多余的回车换行<br />function KindTrim(str)<br />
代码-JS之注册页面验证
羊驼可以吃吗的博客
10-21 1288
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
05-03
通过以上步骤，你已经学会了如何使用JavaScript来创建一个功能完备的注册页面，包括智能提示和严格的输入验证。这个过程中，你将掌握JavaScript与DOM操作、事件处理、函数绑定以及正则表达式的应用等核心技能。继续...
使用JavaScript进行表单校验功能
10-19
同时，确保表单校验的JavaScript代码在DOM元素加载完成后执行，以保证元素ID或name属性可以被正确获取。这样，我们就可以在不提交到服务器的情况下，迅速而有效地验证用户输入的数据，提高用户体验和数据的安全性。
使用Js完成注册页面表单校验
知否技术的博客
12-28 711
DOCTYPE html> html>     head>         meta charset="UTF-8">         title>注册页面title>         script>             function checkForm(){                                  //1.获取用户输入的数据
原生js验证简洁注册登录页面
12-29
序 一个以js验证表单的简洁的注册登录页面，不多说直接上图 效果   主要文件    完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>sign-up</title> <link rel=stylesheet href=css/common_form.css> </head> <body> <div class=content
js注册界面
11-23
一个简单的注册界面验证，如果输入正确会返回输入的用户名和密码，如果没有填写会提示填写完整。
JS一个简单的注册页面实例
10-19
下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS注册界面
m0_58823912的博客
06-10 126
HTML代码： <html> <head><title>注册</title></head> <style type="text/css"> .box1 { width:1920px; height:1080px; border: 2px solid blue; background-image:url("img/bg2.jpg") } .box2 { wid...
一个简单的注册页面,基于JS
QDY5945的博客
11-07 227
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head...
用户注册表单的设计及验证
weixin_48864837的博客
03-21 3930
JSP程序设计 用户注册表单的设计及验证
用js写注册页面
m0_45931484的博客
07-14 1281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> #register label { color: #FF0000; font-size: 12px; } </...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值