一个简单的注册页面的js

前端调用οnblur="函数名(this)"  
/*
 * 用户名
 */
function onblurusername(a){
 var b=a.value;
 if(!b.match('[a-zA-Z]{7}')){
  $("#namespan").html("用户名应为字母且位数应大于6位");
 }else{
  $("#namespan").html("");
 }
 
}
/*
*  关于密码
*/
function onblurpassword(a){
 var b=a.value;
 if(!b.match('[a-zA-Z0-9]{6}')){
  $("#passspan").html("密码应为字母数字组合且不少于6位");
 }else{
  $("#passspan").html("");
 }
 
}
/*
 * 关于确认密码
 */
function onblurpassword1(a){
 var b=a.value;
 var c=$("#password1").val();
 if(c!=b){
  $("#ispassword").html("两次密码不一致");
 }else{
  $("#ispassword").html("");
 }
 
}

/*
 * 关于邮箱
*/
function onbluremail(a){
 var b=a.value;
 if(!b.match('^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$')){
  $("#emailspan").html("邮箱格式不正确");
 }else{
  $("#emailspan").html("");
 }
 
}
/*
 * 关于手机号
 */
function onblurtel(a){
 var b=a.value;
 if(!b.match(/^1[3458]\d{9}$/)){
  $("#telspan").html("手机号格式不正确");
 }else{
  $("#telspan").html("");
 }
 
}
 

转载于:https://www.cnblogs.com/lbbk/p/11275346.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个常见的编程问题。您可以使用 HTML、CSS 和 JavaScript 来实现一个简单的登录注册页面。以下是一个示例代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>登录注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>创建账户</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <button>注册</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>登录</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <a href="#">忘记密码?</a> <button>登录</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>欢迎回来!</h1> <p>请登录您的账户以继续使用我们的服务。</p> <button class="ghost" id="signIn">登录</button> </div> <div class="overlay-panel overlay-right"> <h1>创建账户</h1> <p>请填写您的个人信息以创建账户。</p> <button class="ghost" id="signUp">注册</button> </div> </div> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` * { box-sizing: border-box; } body { background-color: #f6f5f7; font-family: 'Open Sans', sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: #ff416c; background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c); background: linear-gradient(to right, #ff4b2b, #ff416c); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } form { background-color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 50px; height: 100%; text-align: center; } h1 { font-weight: bold; margin-top: 0; } input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } button { border-radius: 20px; border: none; background-color: #ff416c; color: #fff; font-size: 16px; font-weight: bold; padding: 12px 0; margin: 16px 0; width: 100%; cursor: pointer; } button:hover { background-color: #ff4b2b; } .ghost { background-color: transparent; border-color: #fff; color: #fff; } a { color: #fff; font-size: 14px; text-decoration: none; margin: 15px 0; } .overlay-right button:hover { background-color: #fff; color: #ff416c; } .overlay-left button:hover { background-color: #fff; color: #ff416c; } @media screen and (max-width: 960px) { .container { min-height: 830px; height: auto; } .overlay { width: 100%; left: 0; } .form-container { width: 100%; height: 100%; } .sign-up-container { left: 100%; opacity: 1; } .sign-in-container { left: 0; } .overlay-container { width: 100%; left: 0; transform: translateX(0); } .overlay-left { transform: translateX(0); } .overlay-right { transform: translateX(20%); } } ``` JavaScript 代码: ``` const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add("right-panel-active"); }); signInButton.addEventListener('click', () => { container.classList.remove("right-panel-active"); }); ``` 这个页面包括一个登录表单和一个注册表单,以及一个切换登录和注册表单的功能。您可以根据需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值