回复
HarmonyOS应用开发-新样式注册表单体验
鸿蒙时代
发布于 2022-3-4 15:28
浏览
0收藏
一.创建工程
二.示例代码
index.hml代码如下
<div class="body">
<div class="stack">
<div class="left">
</div>
<div class="right">
<text class="header">注册</text>
<input class="input" type="text" value="" maxlength="20" enterkeytype="next"
placeholder="user name" onchange="onUserNameChange">
</input>
<div class="safety-factor-div">
<text id="safe-head" class="notice-txt" style="color : black;"
show="{{ safeHeadShow }}">安全系数</text>
<div class="safe" style="background-color : red;" show="{{ safeD1Show }}"></div>
<div class="safe" style="background-color : #F0F028;" show="{{ safeD2Show }}"></div>
<div class="safe" style="background-color : green;" show="{{ safeD3Show }}"></div>
</div>
<input class="input" type="password" value="" maxlength="20" enterkeytype="next"
placeholder="password" onchange="onPswChange">
</input>
<div class="safety-factor-div">
<text class="notice-txt doudong">{{ pswInnerErr }}</text>
</div>
<input class="input" type="password" value="" maxlength="20" enterkeytype="next"
placeholder="password again" onchange="onRePswChange">
</input>
<div class="safety-factor-div">
<text class="notice-txt doudong">{{ repswInnerErr }}</text>
</div>
<stack class="div-code">
<input class="input" type="text" value="" maxlength="4" enterkeytype="go"
placeholder="safe code" onchange="onSafeCodeChange"
onenterkeyclick="register">
</input>
<canvas ref="code_canvas" class="canvas-code" on:click="canvasClick"/>
</stack>
<div class="safety-factor-div">
<text class="notice-txt" style="color : black;">温馨提示:可点击刷新验证码</text>
</div>
<input type="button" class="btn" value="注册" on:click="register"></input>
</div>
</div>
</div>
</div>
index.css代码如下:
flex-direction: column;
background-color: #5e7c85;
/* padding-top: 52px;*/
height: 100%;
}
.body {
background: linear-gradient(to left bottom, #DD6455, #a18cd1);
width: 100%;
height: 100%;
}
.stack {
width: 100%;
background-color: white;
border-radius: 10px;
height: 400px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25);
overflow: hidden;
margin-top: 10px;
margin-start: 10px;
margin-end: 10px;
}
.left {
width: 40%;
height: 100%;
float: left;
background: linear-gradient(to left bottom, #b2d235, #84bf96);
}
.right {
float: right;
width: 60%;
height: 100%;
flex-direction: column;
padding-start: 10px;
}
.header {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
.input {
height: 36px;
width: 185px;
background-color: #EEEEEE;
placeholder-color: #99000000;
align-items: center;
color: black;
border-radius: 8px;
border: 1px solid red;
font-size: 15px;
}
.safety-factor-div {
height: 30px;
flex-direction: row;
align-items: center;
}
.safe {
width: 24px;
height: 6px;
border-radius: 3px;
margin-start: 5px;
}
.div-code {
width: 185px;
align-items: center;
}
.canvas-code {
position: absolute;
right: 3px;
top: 3px;
height: 30px;
width: 60px;
background-color: #CE6D39;
border-radius: 8px;
}
.btn {
width: 105px;
font-size: 15px;
height: 36px;
margin-start: 40px;
background-color: #CE6D39;
border-radius: 18px;
color: white;
}
.notice-txt {
margin-start: 5px;
font-size: 13px;
color: red;
}
.doudong {
animation: shake 1s ease-out infinite;
}
@keyframes shake {
10% {
transform: translateX(3px) rotate(2deg);
}
20% {
transform: translateX(-3px) rotate(-2deg);
}
30% {
transform: translateX(3px) rotate(2deg);
}
40% {
transform: translateX(-3px) rotate(-2deg);
}
50% {
transform: translateX(2px) rotate(1deg);
}
60% {
transform: translateX(-2px) rotate(-1deg);
}
70% {
transform: translateX(2px) rotate(1deg);
}
80% {
transform: translateX(-2px) rotate(-1deg);
}
90% {
transform: translateX(1px) rotate(0deg);
}
100% {
transform: translateX(-1px) rotate(0deg);
}
}
index.js代码如下:
var code;
var canvas;
var username = null;
var password;
var repassword;
var inputCode = "";
export default {
data: {
safeHeadShow: true,
safeD1Show: false,
safeD2Show: false,
safeD3Show: false,
pswInnerErr: '',
repswInnerErr: '',
},
createCode: function () {
let code = "";
var codeLength = 4;
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];
}
return code;
},
checkPwd: function (str) {
var pattern1 = /([0-9]+)/i;
var pattern2 = /([a-z]+)/i;
if (str.length < 6 || str.length > 20) {
return 0;
}
if (pattern1.exec(str)) {
if (pattern2.exec(str)) {
return 2
}
return 1;
}
},
draw_canvas: function (code) {
if (canvas) {
var ctx = canvas.getContext('2d', {
antialias: true
});
ctx.clearRect(0, 0, 60, 30);
ctx.font = "16px Verdana";
let leftX = (60 - ctx.measureText(code).width) / 2;
if (leftX >= 20) {
leftX = 10;
}
ctx.strokeText(code, leftX, 20);
} else {
console.error("没有找到canvas");
}
},
onShow() {
canvas = this.$refs.code_canvas;
this.canvasClick();
},
canvasClick() {
code = this.createCode();
canvas = this.$refs.code_canvas;
this.draw_canvas(code);
},
onUserNameChange(e) {
username = e.value;
},
onPswChange(e) {
password = e.value;
//this.safeHeadShow = true;
switch (this.checkPwd(password)) {
case 0:
{
this.pswInnerErr = "密码不能小于6位";
this.safeD1Show = true;
this.safeD2Show = false;
this.safeD3Show = false;
break;
}
case 1:
{
this.pswInnerErr = "";
this.safeD1Show = true;
this.safeD2Show = true;
this.safeD3Show = false;
break;
}
case 2:
{
this.pswInnerErr = "";
this.safeD1Show = true;
this.safeD2Show = true;
this.safeD3Show = true;
break;
}
default:
{
this.pswInnerErr = "";
}
}
},
onRePswChange(e) {
repassword = e.value;
if (repassword != password) {
this.repswInnerErr = "两次密码不相同";
} else {
this.repswInnerErr = "";
}
},
onSafeCodeChange(e) {
inputCode = e.value;
},
register() {
if (username) {
if (password) {
if (password.length >= 6) {
if (repassword) {
if (repassword == password) {
if (code == inputCode.toUpperCase()) {
this.alert("恭喜您注册成功,现在开始体验吧!", "#00E5EE", "开始体验");
} else {
this.alertDef("验证码错误");
}
} else {
this.alertDef("两次密码不相同");
}
} else {
this.alertDef("请输入重复密码");
}
} else {
this.alertDef("请输入符合规范的密码");
}
} else {
this.alertDef("请输入密码");
}
} else {
this.alertDef("请输入用户名");
}
},
alertDef(msg) {
this.alert(msg, "#FF0000", "");
},
alert(msg, btnColor, toastMsg) {
prompt.showDialog({
title: "",
message: msg,
buttons: [{
"text": "确定",
"color": btnColor
}],
success: function (e) {
if (e.index == 0 && toastMsg.length != 0) {
//鸿蒙的提示框
prompt.showToast({
message: toastMsg
});
}
}
});
},
}
三.效果案例
分类
标签
HarmonyOS应用开发-新样式注册表单体验.docx 189.69K 8次下载
赞
1
收藏
回复
相关推荐