<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<style>
body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
input {
border: 0;
}
.clear::after {
content: '';
display: block;
clear: both;
}
.box{
width: 500px;
margin: 30px auto;
padding:30px 40px;
border:1px solid #ddd;
box-shadow: 0 0 10px #bbb;
box-sizing: border-box;
}
.box h2{
text-align: center;
color:#666;
}
.box form {
padding:15px 0;
}
.box form ul li{
display: flex;
height: 40px;
line-height: 40px;
margin-bottom: 15px;
}
.box form ul li input{
border: 1px solid #ddd;
height: 38px;
padding:0 10px;
line-height: 38px;
flex:1;
box-sizing: border-box;
}
.box form ul li label{
display: block;
width: 120px;
}
.box form ul li span{
color:red;
padding-right: 10px;
}
.box form button{
width: 100%;
border:none;
height: 40px;
background-color: green;
color:#fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<h2>注册</h2>
<form action="" method="post">
<ul>
<li>
<label for="username"><span>*</span>用户名：</label>
<input type="text" name="username" id="username" placeholder="只能输入6-20个字母、数字、下划线">
</li>
<li>
<label for="email"><span>*</span>电子邮箱：</label>
<input type="text" name="email" id="email" placeholder="请输入正确的电子邮箱地址">
</li>
<li>
<label for="pwd"><span>*</span>密码：</label>
<input type="password" name="pwd" id="pwd" placeholder="由字母开头，包含字母、数字、下划线，6-16位">
</li>
<li>
<label for="pwdOk"><span>*</span>确认密码：</label>
<input type="password" name="pwdOk" id="pwdOk" placeholder="确认密码必须与密码一致">
</li>
</ul>
<button name="submit">提交</button>
</form>
</div>
<script>
function validate_strLength(str){
let regExp = /^(\w){6,20}$/
return regExp.test(str)
}
function validate_email(str){
let regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
return regExp.test(str)
}
function validate_pwd(str){
let regExp = /^[a-zA-Z]\w{5,15}$/
return regExp.test(str)
}
let username = document.getElementById('username')
let email = document.getElementById('email')
let pwd = document.getElementById('pwd')
let pwdOk = document.getElementById('pwdOk')
let form = document.getElementsByTagName('form')[0]
form.submit = function(){
if(validate_strLength(username.value)&&validate_mail(email.value)&&validate_pwd(pwd.value)&&checkOk()){
console.log(username.value);
console.log(email.value);
console.log(pwd.value);
return false
}else{
console.log('验证失败');
return false;
}
}
username.onblur = function(){
if(validate_strLength(username.value)){
console.log('用户名符合要求');
}else{
console.log('用户名不符合要求');
}
}
email.onblur = function(){
if(validate_pwd(pwd.value)){
console.log('邮箱符合要求');
}else{
console.log('邮箱不符合要求');
}
}
function checkOk(){
if(pwd.value === pwdOk.value){
console.log('密码与重复密码一致');
}else{
console.log('密码与重复密码不一致');
return false;
}
}
pwdOk.onkeyup = checkOk
</script>
</body>
</html>
1+X操作真题（可做教学使用）.zip
需积分: 0 115 浏览量
2023-12-15
12:29:42
上传
评论
收藏 91KB ZIP 举报
1+X操作真题（可做教学使用）.zip （7个子文件） 
1+X真题（可做教学使用） 
register.html 5KB
jquery-3.6.0.js 282KB student.html 4KB data.json 343B prize.html 3KB casher.html 3KB computer.html 2KB资源评论
