js实现京东注册

最新推荐文章于 2021-06-03 02:46:14 发布

灿尔哈擦苏

最新推荐文章于 2021-06-03 02:46:14 发布

阅读量4.1k

点赞数 6

分类专栏： web前端开发文章标签：注册js代码京东注册栏 js注册 js注册流程逻辑注册页面布局

本文链接：https://blog.csdn.net/susuzhe123/article/details/70226886

版权

本文档展示了如何使用HTML和JavaScript实现京东注册页面，包括用户名、密码、密码确认、邮箱和手机号的输入验证，以及同意注册协议的复选框功能。JavaScript代码用于处理输入验证，如检查用户名、密码的格式和长度，以及邮箱和手机号的正确性，并显示相应的提示信息。注册按钮点击后，会检查所有输入项和同意协议的复选框状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel = "stylesheet" href = "css/jd.css"/>
		<script src = "js/jd.js"></script>
	</head>
	<body>
		<!--京东头部-->
		<div class="header">
	        <a class="logo" href="https://www.jd.com">京东</a>
	        <div class="desc">欢迎注册</div>
	    </div>
	    <!--版心-->
	    <div class="container">
	    	<!--注册模块-->
	    	<div class = "register">
	    		<!---------用户名注册------------->
	    		<div class = "user">
	    			<!--输入框-->
	    			<div class = "userTop">
	    				<label for = "userName">用 户 名</label>
	    				<input type = "text" id="userName" placeholder="您的账户名和登录名"/>
	    				<i></i>
	    			</div>
	    			<!--提示信息-->
	    			<div class = "tip">
	    				<i></i>
	    				<span></span>
	    			</div>
	    		</div>
	    		<!---------密码------------->
	    		<div class = "user">
	    			<!--输入框-->
	    			<div class = "userTop">
	    				<label for = "psd">设 置 密 码</label>
	    				<input type = "password" id="psd" placeholder="建议至少两种字符组合"/>
	    				<i></i>
	    			</div>
	    			<!--提示信息-->
	    			<div class = "tip">
	    				<i></i>
	    				<span></span>
	    			</div>
	    		</div>
	    		<!---------密码是否一致------------->
	    		<div class = "user">
	    			<!--输入框-->
	    			<div class = "userTop">
	    				<label for = "psd1">设 置 密 码</label>
	    				<input type = "password" id="psd1" placeholder="请确认您的密码"/>
	    				<i></i>
	    			</div>
	    			<!--提示信息-->
	    			<div class = "tip">
	    				<i></i>
	    				<span></span>
	    			</div>
	    		</div>
	    		<!---------邮箱验证------------->
	    		<div class = "user">
	    			<!--输入框-->
	    			<div class = "userTop">
	    				<label for = "email">邮 箱 账 号</label>
	    				<input type = "text" id="email" placeholder="输入您的邮箱账号"/>
	    				<i></i>
	    			</div>
	    			<!--提示信息-->
	    			<div class = "tip">
	    				<i></i>
	    				<span></span>
	    			</div>
	    		</div>
	    		<!---------手机验证------------->
	    		<div class = "user">
	    			<!--输入框-->
	    			<div class = "userTop">
	    				<label for = "phone">手 机 号</label>
	    				<input type = "text" id="phone" placeholder="输入您的手机号"/>
	    				<i></i>
	    			</div>
	    			<!--提示信息-->