您的位置：首页 > 移动开发 > WebAPP

WebApp新手创作--注册页面

2016-01-06 10:08 501 查看
新手第一次写博客，也不熟悉一些格式等等，希望各位大神提出意见

第一次写WebApp方面的页面，对于一些标签的理解性不强。特别是一些常见的手机号的输入的编写，不知道用哪个 标签合适。

以及验证码的一些接口~~~也不知道如何去调用。

注意点一：

在定义类似于“输入手机号码”+左边为“输入验证码”，则要运用定位i额，将input覆盖一部分

圆角问题也是需要单独设置

注意点二：

一般字体我们运用白色字体，会比黑色字体好看

注意点三：

响应式WebApp，在哪个平台上隐藏哪块部分，则添加.hidden-lg/md/sm/xs等

下面是HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>注册页面</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/validator.css"/>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/validator.js"></script>
</head>
<body>
<div class="navbar">
<div class="container">
<div class="row">
<div class="col-md-4 hidden-xs hidden-sm"></div>
<div class="col-md-4 col-sm-12 register">
<div class="tip">
<div class="text">注册即送现金抵扣券规则说明</div>
<img src="img/img.jpg" alt=""/>
</div>
<form id="myform" name="myform" onsubmit="return formValidator();">
<table>
<tr>
<td><input type="text" id="pnumber" placeholder="输入您的手机号码"></td>
<td id="getValidator">获取验证码</td>
</tr>
<tr>
<!-- 显示提示内容 -->
<td><div id="pnumberTip"></div></td>
</tr>
<tr>
<td colspan="2"><input type="text" id="number" placeholder="输入验证码"/></td>
</tr>
<tr>
<td><div id="numberTip"></div></td>
</tr>
<tr>
<td colspan="2"><input type="password" id="pwd" placeholder="输入密码"></td>
</tr>
<tr>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td colspan="2"><input type="password" id="repwd" placeholder="确认密码"></td>
</tr>
<tr>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="submit" value="提交"></td>
</tr>
</table>
</form>
</div>
<div class="col-md-4 hidden-xs hidden-sm"></div>
</div>
</div>
</div>
</body>
</html>
下面是JS代码
function pnumberValidator(){
//定义正则表达式
var regExp=/^[0-9]{11}$/;
var $myval=$("#pnumber").val();
//a.不能为空
if($myval==""||$myval==null){
$("#pnumberTip").text("手机号不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//b.长度为11位的有效手机号
else if(!regExp.test($myval)){
$("#pnumberTip").text("手机号输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}
//输入正确
else{
$("#pnumberTip").text("手机号输入正确").css({
"color":"#ffccff",
"font-weight":"bold"
});
return true;
}
}
function numberValidator(){
//a.验证码不能为空
var $number=$("#number").val();
if($number==""||$number==null){
$("#number").text("验证码不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if(!regExp.text($number)){
$("#number").text("验证码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else{
$("#pwdTip").text("密码输入正确").css({
"color":"#ffccff",
"font-weight":"bold"
});
return true;
}
}
function mypwdValidator(){
//a.密码不能为空
var $mypwd=$("#pwd").val();
var regExp=/^[a-zA-Z]{6,8}$/;
if($mypwd==""||$mypwd==null){
$("#pwdTip").text("密码不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if(!regExp.test($mypwd)){
$("#pwdTip").text("密码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else{
$("#pwdTip").text("密码输入正确").css({
"color":"#ffccff",
"font-weight":"bold"
});
return true;
}
}

function remypwdValidator(){
//a.密码不能为空
var $mypwd=$("#pwd").val();
var $remypwd=$("#repwd").val();
var regExp=/^[a-zA-Z]{6,8}$/;
if($remypwd==""||$remypwd==null){
$("#repwdTip").text("密码不能为空").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if(!regExp.test($remypwd)){
$("#repwdTip").text("密码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else if($remypwd!=$mypwd){
$("#repwdTip").text("密码输入错误").css({
"color":"red",
"font-weight":"bold"
});
return false;
}else{
$("#repwdTip").text("密码输入正确").css({
"color":"#ffccff",
"font-weight":"bold"
});
return true;
}
}
$(function(){
//1 手机号码验证
$("#pnumber").focus(function(){
$("#pnumberTip").text("请输入有效的手机号码").css({
"color" : "black",
"font-weight" : "normal"
});
}).blur(pnumberValidator);
//2 密码验证
$("#pwd").focus(function(){
$("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({

9216
"color":"black",
"font-weight":"normal"
});
}).blur(mypwdValidator);
//3 密码验证
$("#pwd").focus(function(){
$("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({
"color":"black",
"font-weight":"normal"
});
}).blur(mypwdValidator);
$("#repwd").focus(function(){
$("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({
"color":"black",
"font-weight":"normal"
});
}).blur(mypwdValidator);
//3 密码验证
$("#repwd").focus(function(){
$("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({
"color":"black",
"font-weight":"normal"
});
}).blur(remypwdValidator);
})
function formValidator(){
// 判断表单内所有元素验证全部通过
if(pnumberValidator()&&numberValidator()&&mypwdValidator()&&remypwdValidator()){
alert("表单验证成功!");
//return true;
}else{
alert("表单验证失败!");
//return false;
}
}

下面是自己定义的一些CSS

input{
border:1px solid transparent;
border-color: #ccc;
border-radius: 4px;
}
div.navbar{
border:1px solid #000;
width:100%;
height:100%;
}
.row{
margin:0 auto;
}
.tip{
top:0;
left:0;
z-index:-2;
}
.text{
font-size:16px;
font-weight: bold;
color: #fff;
font-family: "Microsoft YaHei";
position: absolute;
top:0px;
margin-left:15px;
width:341px;
height:30px;
line-height:30px;
text-align:center;
background:#67b168;
left:0;
z-index:1;
}
form{
display:block;
margin-top:20px;
margin-left:20px;
}
#pnumber{
width:300px;
height:30px;
margin-bottom:20px;
}
#getValidator{
display: block;
width:105px;
height:30px;
text-align: center;
line-height:30px;
background: #67b168;
}
#number,#pwd,#repwd,#submit{
font-size:16px;
width:300px;
height:30px;
line-height:30px;
margin-bottom:20px;
}
#submit{
background: #67b168;
color: #fff;
font-weight: bold;
}
td>div{
width:200px;
}
#pnumber{
top:0;
left:0px;
z-index:-2;
}
#getValidator{
position:relative;
border-top-right-radius:4px;
border-bottom-right-radius: 4px;
top:0;
left:-105px;
z-index:1;
color:#fff;
font-weight: bold;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html web app 验证码 JS
相关文章推荐
新的分享
章节导航