本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01html用户登陆界面代码-网页设计css代码大全

好久没有写jquery控制页的编码了。今日前面没来。让我来解决一下:

大家先一起来看看HTML登陆编码:

1.网页页面编码。

登录密码 手机登录

接收验证码 立即登录 微信登录 QQ登录 密码忘了？ 点击注册

2.网页页面实际效果。

3.jquery控制代码。

3.1.转换登陆地区。

$(".login-nav li").click(function(){var liText = $(this).text();$(".login-nav li").removeClass("active");$(this).addClass("active");if(liText.indexOf("登录密码")>-1){$("#passwordLogin").show();$("#verifyLogin").hide();}if(liText.indexOf("手机登录")>-1){$("#passwordLogin").hide();$("#verifyLogin").show();}})

3.2.手机号认证。

//手机号码校检$(".login-type input[name='mobile']").blur(function(){var mobilePhone = $(this).val();var isPhone = isPhoneNo(mobilePhone);console.log(isPhone);if(!isPhone){console.log("手机号码校检");$(this).addClass("page-input-error");}else{$(this).removeClass("page-input-error");}})// 验证手机号function isPhoneNo(phone) {var pattern = /^1[34578]d{9}$/;return pattern.test(phone);}

3.3.发送验证码。

汉语翻译

推送按键涉及到的编码包含倒数计时:

/** * 发送验证码 */$(".login-identify-code").click(function(){var btnText = $(this).text();if(btnText!='接收验证码'){return;}var mobile = $("#verifyLogin input[name='mobile']").val();if(mobile=="){ $("#verifyLogin input[name='mobile']").addClass("page-input-error"); }//分辨手机号码var hasErr = $("#verifyLogin input[name='mobile']").hasClass("page-input-error");if(hasErr){ return;}var param = new Object();param.mobile = mobile;param.sendType = "webLogin";var postResponse = syncHttp(getUrlConfig().sendMobileVerifyCode,param);if(postResponse){ var code = postResponse.code; if(code=="00"){ console.log("发送成功"); var topV = 60; var interval = setInterval(function(){ topV--; $(".login-identify-code").html(topV "s后再试"); if(topV==0){ $(".login-identify-code").html("接收验证码"); clearInterval(interval); } }, 1000); }else{ console.log("登录失败缺少对象不正确为%s:",postResponse.msg); $("#confirmMsg").html(postResponse.msg); }}})