返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-新样式注册表单体验

李洋水蛟龙
2022-03-04 14:33:24
阅读量0
0
2
1.png
一. 创建工程
二. 示例代码
index.hml代码如下：
  1. <div class="container">
  2.     <div class="body">
  3.         <div class="stack">
  4.             <div class="left">
  5.             </div>
  6.             <div class="right">
  7.                 <text class="header">注册</text>
  8.                 <input class="input" type="text" value="" maxlength="20" enterkeytype="next"
  9.                        placeholder="user name" onchange="onUserNameChange">
  10.                 </input>
  11.                 <div class="safety-factor-div">
  12.                     <text id="safe-head" class="notice-txt" style="color : black;"
  13.                           show="{{ safeHeadShow }}">安全系数</text>
  14.                     <div class="safe" style="background-color : red;" show="{{ safeD1Show }}"></div>
  15.                     <div class="safe" style="background-color : #F0F028;" show="{{ safeD2Show }}"></div>
  16.                     <div class="safe" style="background-color : green;" show="{{ safeD3Show }}"></div>
  17.                 </div>
  18.                 <input class="input" type="password" value="" maxlength="20" enterkeytype="next"
  19.                        placeholder="password" onchange="onPswChange">
  20.                 </input>
  21.                 <div class="safety-factor-div">
  22.                     <text class="notice-txt doudong">{{ pswInnerErr }}</text>
  23.                 </div>
  24.                 <input class="input" type="password" value="" maxlength="20" enterkeytype="next"
  25.                        placeholder="password again" onchange="onRePswChange">
  26.                 </input>
  27.                 <div class="safety-factor-div">
  28.                     <text class="notice-txt doudong">{{ repswInnerErr }}</text>
  29.                 </div>
  30.                 <stack class="div-code">
  31.                     <input class="input" type="text" value="" maxlength="4" enterkeytype="go"
  32.                            placeholder="safe code" onchange="onSafeCodeChange"
  33.                            onenterkeyclick="register">
  34.                     </input>
  35.                     <canvas ref="code_canvas" class="canvas-code" on:click="canvasClick"/>
  36.                 </stack>
  37.                 <div class="safety-factor-div">
  38.                     <text class="notice-txt" style="color : black;">温馨提示：可点击刷新验证码</text>
  39.                 </div>
  40.                 <input type="button" class="btn" value="注册" on:click="register"></input>
  41.             </div>
  42.         </div>
  43.     </div>
  44. </div>
复制代码

index.css代码如下：
  1. .container {
  2.     flex-direction: column;
  3.     background-color: #5e7c85;
  4. /*    padding-top: 52px;*/
  5.     height: 100%;
  6. }

  8. .body {
  9.     background: linear-gradient(to left bottom, #DD6455, #a18cd1);
  10.     width: 100%;
  11.     height: 100%;
  12. }

  14. .stack {
  15.     width: 100%;
  16.     background-color: white;
  17.     border-radius: 10px;
  18.     height: 400px;
  19.     box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  20.     overflow: hidden;
  21.     margin-top: 10px;
  22.     margin-start: 10px;
  23.     margin-end: 10px;
  24. }

  26. .left {
  27.     width: 40%;
  28.     height: 100%;
  29.     float: left;
  30.     background: linear-gradient(to left bottom, #b2d235, #84bf96);
  31. }

  33. .right {
  34.     float: right;
  35.     width: 60%;
  36.     height: 100%;
  37.     flex-direction: column;
  38.     padding-start: 10px;
  39. }

  41. .header {
  42.     font-size: 20px;
  43.     font-weight: bold;
  44.     margin-top: 20px;
  45.     margin-bottom: 10px;
  46. }

  48. .input {
  49.     height: 36px;
  50.     width: 185px;
  51.     background-color: #EEEEEE;
  52.     placeholder-color: #99000000;
  53.     align-items: center;
  54.     color: black;
  55.     border-radius: 8px;
  56.     border: 1px solid red;
  57.     font-size: 15px;
  58. }

  60. .safety-factor-div {
  61.     height: 30px;
  62.     flex-direction: row;
  63.     align-items: center;
  64. }

  66. .safe {
  67.     width: 24px;
  68.     height: 6px;
  69.     border-radius: 3px;
  70.     margin-start: 5px;
  71. }

  73. .div-code {
  74.     width: 185px;
  75.     align-items: center;
  76. }

  78. .canvas-code {
  79.     position: absolute;
  80.     right: 3px;
  81.     top: 3px;
  82.     height: 30px;
  83.     width: 60px;
  84.     background-color: #CE6D39;
  85.     border-radius: 8px;
  86. }

  88. .btn {
  89.     width: 105px;
  90.     font-size: 15px;
  91.     height: 36px;
  92.     margin-start: 40px;
  93.     background-color: #CE6D39;
  94.     border-radius: 18px;
  95.     color: white;
  96. }

  98. .notice-txt {
  99.     margin-start: 5px;
  100.     font-size: 13px;
  101.     color: red;
  102. }

  104. .doudong {
  105.     animation: shake 1s ease-out infinite;
  106. }

  108. @keyframes shake {
  109.     10% {
  110.         transform: translateX(3px) rotate(2deg);
  111.     }

  113.     20% {
  114.         transform: translateX(-3px) rotate(-2deg);
  115.     }

  117.     30% {
  118.         transform: translateX(3px) rotate(2deg);
  119.     }

  121.     40% {
  122.         transform: translateX(-3px) rotate(-2deg);
  123.     }

  125.     50% {
  126.         transform: translateX(2px) rotate(1deg);
  127.     }

  129.     60% {
  130.         transform: translateX(-2px) rotate(-1deg);
  131.     }

  133.     70% {
  134.         transform: translateX(2px) rotate(1deg);
  135.     }

  137.     80% {
  138.         transform: translateX(-2px) rotate(-1deg);
  139.     }

  141.     90% {
  142.         transform: translateX(1px) rotate(0deg);
  143.     }

  145.     100% {
  146.         transform: translateX(-1px) rotate(0deg);
  147.     }
  148. }
复制代码

index.js代码如下：
  1. import prompt from '@system.prompt'
  2. var code;
  3. var canvas;
  4. var username = null;
  5. var password;
  6. var repassword;
  7. var inputCode = "";

  9. export default {
  10.     data: {
  11.         safeHeadShow: true,
  12.         safeD1Show: false,
  13.         safeD2Show: false,
  14.         safeD3Show: false,
  15.         pswInnerErr: '',
  16.         repswInnerErr: '',
  17.     },
  18.     createCode: function () {
  19.         let code = "";
  20.         var codeLength = 4;
  21.         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');
  22.         for (var i = 0; i < codeLength; i++) {
  23.             var charIndex = Math.floor(Math.random() * 36);
  24.             code += selectChar[charIndex];
  25.         }
  26.         return code;
  27.     },
  28.     checkPwd: function (str) {
  29.         var pattern1 = /([0-9]+)/i;
  30.         var pattern2 = /([a-z]+)/i;
  31.         if (str.length < 6 || str.length > 20) {
  32.             return 0;
  33.         }
  34.         if (pattern1.exec(str)) {
  35.             if (pattern2.exec(str)) {
  36.                 return 2
  37.             }
  38.             return 1;
  39.         }
  40.     },
  41.     draw_canvas: function (code) {
  42.         if (canvas) {
  43.             var ctx = canvas.getContext('2d', {
  44.                 antialias: true
  45.             });
  46.             ctx.clearRect(0, 0, 60, 30);
  47.             ctx.font = "16px Verdana";
  48.             let leftX = (60 - ctx.measureText(code).width) / 2;
  49.             if (leftX >= 20) {
  50.                 leftX = 10;
  51.             }
  52.             ctx.strokeText(code, leftX, 20);
  53.         } else {
  54.             console.error("没有找到canvas");
  55.         }
  56.     },
  57.     onShow() {
  58.         canvas = this.$refs.code_canvas;
  59.         this.canvasClick();
  60.     },
  61.     canvasClick() {
  62.         code = this.createCode();
  63.         canvas = this.$refs.code_canvas;
  64.         this.draw_canvas(code);
  65.     },
  66.     onUserNameChange(e) {
  67.         username = e.value;
  68.     },
  69.     onPswChange(e) {
  70.         password = e.value;

  72.         //this.safeHeadShow = true;
  73.         switch (this.checkPwd(password)) {
  74.             case 0:
  75.             {
  76.                 this.pswInnerErr = "密码不能小于6位";
  77.                 this.safeD1Show = true;
  78.                 this.safeD2Show = false;
  79.                 this.safeD3Show = false;
  80.                 break;
  81.             }
  82.             case 1:
  83.             {
  84.                 this.pswInnerErr = "";
  85.                 this.safeD1Show = true;
  86.                 this.safeD2Show = true;
  87.                 this.safeD3Show = false;
  88.                 break;
  89.             }
  90.             case 2:
  91.             {
  92.                 this.pswInnerErr = "";
  93.                 this.safeD1Show = true;
  94.                 this.safeD2Show = true;
  95.                 this.safeD3Show = true;
  96.                 break;
  97.             }
  98.             default:
  99.                 {
  100.                     this.pswInnerErr = "";
  101.                 }
  102.         }
  103.     },
  104.     onRePswChange(e) {
  105.         repassword = e.value;
  106.         if (repassword != password) {
  107.             this.repswInnerErr = "两次密码不相同";
  108.         } else {
  109.             this.repswInnerErr = "";
  110.         }
  111.     },
  112.     onSafeCodeChange(e) {
  113.         inputCode = e.value;
  114.     },
  115.     register() {
  116.         if (username) {
  117.             if (password) {
  118.                 if (password.length >= 6) {
  119.                     if (repassword) {
  120.                         if (repassword == password) {
  121.                             if (code == inputCode.toUpperCase()) {
  122.                                 this.alert("恭喜您注册成功，现在开始体验吧！", "#00E5EE", "开始体验");
  123.                             } else {
  124.                                 this.alertDef("验证码错误");
  125.                             }
  126.                         } else {
  127.                             this.alertDef("两次密码不相同");
  128.                         }
  129.                     } else {
  130.                         this.alertDef("请输入重复密码");
  131.                     }
  132.                 } else {
  133.                     this.alertDef("请输入符合规范的密码");
  134.                 }
  135.             } else {
  136.                 this.alertDef("请输入密码");
  137.             }
  138.         } else {
  139.             this.alertDef("请输入用户名");
  140.         }
  141.     },
  142.     alertDef(msg) {
  143.         this.alert(msg, "#FF0000", "");
  144.     },
  145.     alert(msg, btnColor, toastMsg) {
  146.         prompt.showDialog({
  147.             title: "",
  148.             message: msg,
  149.             buttons: [{
  150.                           "text": "确定",
  151.                           "color": btnColor
  152.                       }],
  153.             success: function (e) {
  154.                 if (e.index == 0 && toastMsg.length != 0) {
  155.                     //鸿蒙的提示框
  156.                     prompt.showToast({
  157.                         message: toastMsg
  158.                     });
  159.                 }
  160.             }
  161.         });
  162.     },
  163. }
复制代码

三. 效果案例
1.png
附件：
HarmonyOS应用开发-新样式注册表单体验.docx
(189.69 KB, 下载次数: 0)

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友