HarmonyOS应用开发-新样式注册表单体验

一.创建工程
二.示例代码
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
                    });
                }
            }
        });
    },
}

三.效果案例