做了一下午，目前还没做完，，，
HTML整体文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="user-register-js.js"></script>
<link rel="stylesheet" type="text/css" href="register.css"/>
</head>
<body>
<div class="d1">
<form id="myForm" name="myForm">
<!-- 用户名 -->
<label for="userName">用户名:</label>
<input type="text" id="userName" name="userName"
placeholder="请输入用户名" autofocus onfocus="func_username_onfocus()"
onblur="func_username_onblur()"/>
<span id="msg_userName"></span>
<br>
<!-- 密码 -->
<label for="Pwd">密码:</label>
<input type="password" id="Pwd" name="Pwd" placeholder="请输入密码"
onfocus="func_pwd_onfocus()" onblur="func_pwd_onblur()"/>
<span id="msg_Pwd"></span>
<br>
<!-- 确认密码 -->
<label for="Pwd2">确认密码:</label>
<input type="password" id="Pwd2" name="Pwd2" placeholder="请输入确认密码"
onfocus="func_pwd2_onfocus()" onblur="func_pwd2_onblur()"/>
<span id="msg_Pwd2"></span>
<br>
<!-- 邮箱 -->
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱"
pattern=".*@.*" multiple/><br>
<!-- 手机号 -->
<label for="Phone">手机号:</label>
<input type="tel" id="Phone" name="Phone" placeholder="请输入手机号"
pattern="(\+86)?1\d{10}"/><br>
<!-- 专业 -->
<label>专业:</label>
<input type="text" list="datalists"/><br>
<datalist id="datalists">
<option value="前端"></option>
<option value="Java"></option>
<option value="Python"></option>
<option value="C++"></option>
</datalist>
<!-- 分数 -->
<label for="number">分数:</label>
<input type="number" id="number" name="number" max="100" min="0" value="20"
oninput="func_oninput()"/><br>
<meter max="100" min="0" hight="90" low="59" value="50" id="meter"></meter><br>
<label for="file">上传文件:</label>
<input type="file" id="file" name="file" mutiple/><br>
<label for="color">颜色拾取:</label>
<input type="color" id="color" name="color"/><br>
<label for="range">范围拉条:</label>
<input type="range" id="range" name="range" max="100" min="0" value="60"/><br>
进度条:<progress max="100" value="50"></progress><br>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
JavaScript整体代码
var event_whether=[];
//用户名验证
function func_username_onfocus(){
var Msg = document.getElementById('msg_userName');
Msg.innerHTML = '正在输入...';
Msg.style.color = 'green'
}
function func_username_onblur(){
var name = document.getElementById('userName').value;
var msg = document.getElementById('msg_userName');
if(name == null || name == ""){
msg.innerHTML = '*用户名不能为空';
msg.style.color = 'red';
event_whether.push(0);
}
else if(name.length < 3){
msg.innerHTML = '*用户名长度不小于3位';
msg.style.color = 'red';
}
else{
msg.innerHTML = '用户名可用';
msg.style.color = 'green';
}
}
//密码验证
function func_pwd_onfocus(){
var Msg_pwd = document.getElementById('msg_Pwd');
Msg_pwd.innerHTML = '正在输入...';
Msg_pwd.style.color = 'green';
}
function func_pwd_onblur(){
var pwd = document.getElementById('Pwd').value;
var msg_pwd = document.getElementById('msg_Pwd');
if(pwd == null || pwd == ""){
msg_pwd.innerHTML = '*密码不能为空';
msg_pwd.style.color = 'red';
}
else if(pwd.length < 3){
msg_pwd.innerHTML = '*密码长度不小于3位';
msg_pwd.style.color = 'red';
}
else{
msg_pwd.innerHTML = '密码可用';
msg_pwd.style.color = 'green';
}
}
//确认密码验证
function func_pwd2_onfocus(){
var Msg_pwd2 = document.getElementById('msg_Pwd2');
Msg_pwd2.innerHTML = '正在输入...';
Msg_pwd2.style.color = 'green';
}
function func_pwd2_onblur(){
var pwd = document.getElementById('Pwd').value;
var pwd2 = document.getElementById('Pwd2').value;
var msg_pwd2 = document.getElementById('msg_Pwd2');
if(pwd2 != pwd){
msg_pwd2.innerHTML = '*两次密码输入不一致'
msg_pwd2.style.color = 'red';
}
else{
msg_pwd2.innerHTML = '密码可用';
msg_pwd2.style.color = 'green';
}
}
//分数条随着分数变动
function func_oninput(){
var number_get = document.getElementById('number').value;
var meter_number = document.getElementById('meter').value;
meter_number = number_get;
}
CSS整体代码
*{
margin:0;
padding:0;
}
.d1{
margin:10px auto;
width:100%px;
height:100%;
border-radius:4px;
background-color:#CCC;
}
div > form > label{
margin-top:5px;
margin-left:10px;
}
div > form > meter{
height:50px;
width:25%;
margin-left:59px;
}
div > form > input{
margin:10px 10px;
height:25px;
width:25%;
text-line:40px;
border-radius:3px;
border:None;
}