宠喵club注册页面
Posted 零语言
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了宠喵club注册页面相关的知识，希望对你有一定的参考价值。
这个注册页面运用了正则表达式的方法，比如验证手机号码，验证密码等等：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>
<link rel="icon" href="img/www.ico.la_65e2dbdc4ba7689767c152dc98d4c1a8_16X16.ico" type="image/x-icon"/>
<title>
宠喵club 注册
</title>
<style>
*{
margin:0px;
padding:0px;
}
.c1 {
width:1350px;
height:150px;
/*border:1px solid black;*/
}
#dxx {
width:50px;
height:150px;
/*border:1px solid black;*/
}
.c2 {
width:900px;
height:1100px;
/*border:1px solid black;*/
margin-left:330px;
}
.c2a {
width:700px;
height:200px;
/*border:1px solid black;*/
margin:50px 0px 0px 0px;
}
.c2b {
width:700px;
height:50px;
/*border:1px solid blue;*/
margin:1px 0px 30px 0px;
border-bottom:3px solid Silver;
font-family:"微软雅黑";
font-size:30px;
font-style:italic;
}
.c2c {
width:700px;
height:790px;
/*border:1px solid Lavender;*/
margin:0px 0px 0px 0px;
background-color:Lavender;
}
.c2c1 {
width:700px;
height:40px;
/*border:1px solid red;*/
}
#name {
width:350px;
height:37px;
/*border:1px solid black;*/
}
.c2c2{
width:700px;
height:40px;
/*border:1px solid red;*/
margin:50px 0px 50px 0px;
}
#pwd {
width:350px;
height:37px;
/*border:1px solid black;*/
}
.c2c3 {
width:700px;
height:40px;
/*border:1px solid red;*/
margin:50px 0px 25px 0px;
}
#rpwd {
width:350px;
height:37px;
/*border:1px solid black;*/
}
.c2c4 {
width:700px;
height:40px;
/*border:1px solid red;*/
margin:0px 0px 0px 0px;
line-height:40px;
}
.c2c5 {
width:700px;
height:40px;
/*border:1px solid red;*/
margin:25px 0px 50px 0px;
}
#phone {
width:350px;
height:37px;
/*border:1px solid black;*/
}
.c2c6 {
width:700px;
height:40px;
/*border:1px solid red;*/
margin:50px 0px 50px 0px;
}
#d5 {
width:80px;
height:40px;
}
#d6 {
width:350px;
height:37px;
/*border:1px solid black;*/
}
#d7 {
width:450px;
height:80px;
margin-left:125px;
font-size:30px;
}
.c2c7 {
width:700px;
height:40px;
/*border:1px solid red;*/
margin:50px 0px 50px 0px;
line-height:40px;
font-size:15px;
text-align:center;
}
#d8 {
width:15px;
height:15px;
}
.c3 {
width:200px;
height:20px;
/*border:1px solid black;*/
margin:auto;
font-size :10px;
}
</style>
</head>
<body>
<div class="c1">
<img src="img/电放费_meitu_4_副本_meitu_1_meitu_2.jpg" />
</div>
<div class="c2">
<div class="c2a">
<img src="img/dsdsvds.jpg" />
</div>
<div class="c2b">
注册账号</div>
<!--<div id="dxx">
</div>-->
<div class="c2c">
<div class="c2c1">
用户名: <input type="text"name="name" id="name" value="" onblur="checkformname()" placeholder="请输入用户名" />
<span id="sname" class="frbule">输入至少四位的用户名</span>
</div>
<div class="c2c2">
密码: <input name="pwd" id="pwd" type="password" onblur="checkpwd()" placeholder="请输入密码"/>
<span id="spwd" class="frbule">请输入至少六位密码</span>
</div>
<div class="c2c3">
确认密码: <input name="rpwd" id="rpwd" type="password" onblur="rcheckpwd()" placeholder="请确认密码"/>
<span id="srpwd" class="frbule">请输入重复密码</span>
</div>
<div class="c2c4">
性别
<input type="radio" name="1"id="dy"checked="checked"value="" />
男
<input type="radio" id="dx"name="1"value="" />
女
</div>
<div class="c2c5">
手机号码: <input type="text"name="" id="phone" value="" onblur="checkformphone()" placeholder="请输入手机号" />
<span id="sphone" class="frbule">请输入重复密码</span>
</div>
<div class="c2c6">
<input type="button"id="d5" name=""value="获取验证码"/>
<input type="text"name="" id="d6" value="" placeholder="请输入验证码"/></div>
<div class="c2c7">
<input type="checkbox"id="d8" name="1"/>
我已阅读并同意相关服务条款和隐私政策
</div>
<input type="button"id="d7" name=""value="立即注册" disabled="disabled" />
<!-- <div class="c2c7">
<input type="checkbox"id="d8" name="1"/>
我已阅读并同意相关服务条款和隐私政策
</div>-->
</div>
</div>
<div class="c3"> 本网站最终解释权归本公司所有</div>
</body>
</html>
<script>
var d7 = document.getElementById("d7");
var d8 = document.getElementById("d8");
d8.onchange = function () {
var status = d8.checked;
if (status == true) {
d7.removeAttribute("disabled");
} else {
d7.setAttribute("disabled", "disabled");
}
}
//删除左右两端的空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//获取元素的内容
function get_value(name) {
return document.getElementById(name).value;
}
//手机号码验证正则
function y_phone(num) {
var reg = /^1[3|4|5|7|8]\d{9}$/;
return reg.test(num);
}
//获取元素的id对象
function get_id(id) {
return document.getElementById(id);
}
function checkformphone() {
var regname = /^1[3|4|5|7|8]\d{9}$/;
var phone = document.getElementById("phone");
var sphone = document.getElementById("sphone");
if (phone.length >= 11) {
sphone.className = "frred";
sphone.innerHTML = "×请输入正确格式的手机号";
}
else {
if (phone.value.match(regname)) {
sphone.className = "fgren";
sphone.innerHTML = "√手机号可用"
}
else {
phone.className = "frred";
sphone.innerHTML = "×手机号格式输入错误，请重新输入";
}
}
}
function checkformname() {
var regname = /^\w{4,10}$/;
var fname = document.getElementById("name");
var ftname = document.getElementById("sname");
if (fname.value == "" || fname.value.length < 4 || fname.value.length > 10) {
ftname.className = "frred";
ftname.innerHTML = "× 请输入4-10位，可包含数字、字母";
}
else {
if (fname.value.match(regname)) {
ftname.className = "fgren";
ftname.innerHTML = "√用户名可用"
}
else {
ftname.className = "frred";
ftname.innerHTML = "× 用户名格式输入错误，请检查";
}
}
}
function checkpwd() {
var fpwd = document.getElementById("pwd");
var ftpwd = document.getElementById("spwd");
if (fpwd.value == "" || fpwd.value.length < 4 || fpwd.value.length > 20) {
ftpwd.className = "frred";
ftpwd.innerHTML = "× 请输入4-20位用户密码";
}
else {
ftpwd.className = "fgren";
ftpwd.innerHTML = "√密码可用"
}
}
function rcheckpwd() {
var fpwd = document.getElementById("pwd");
var frpwd = document.getElementById("rpwd");
var ftrpwd = document.getElementById("srpwd");
if (frpwd.value == "") {
ftrpwd.className = "frred";
ftrpwd.innerHTML = "× 请输入您的重复密码"
}
else {
if (frpwd.value != fpwd.value) {
ftrpwd.className = "frred";
ftrpwd.innerHTML = "× 两次密码不一致，请重新输入";
}
else {
ftrpwd.className = "fgren";
ftrpwd.innerHTML = " √ 密码输入正确"
}
}
}
</script>
以上是关于宠喵club注册页面的主要内容，如果未能解决你的问题，请参考以下文章