Hbuilder开发移动新闻客户端(一)

创建项目,构建一个登录页面

一.右键新建一个移动app,命名为HelloNews.
这里写图片描述
二.打开Index.html,进行mheader和mbody的编写。
mbody中包含二个input输入框,分别用来进行用户名和密码的输入,代码如下:

<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">登录</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row"> <label>账号:</label> <input type="text" class="mui-input-clear" placeholder="请输入账号" id="username"> </div> <div class="mui-input-row"> <label>密码:</label> <input type="text" class="mui-input-clear" placeholder="请输入密码" id="password"> </div> </form> <div class="mui-content-padded" align="center"> <button type="button" class="mui-btn mui-btn-blue " id="login">登录</button> <button type="button" class="mui-btn mui-btn-green " id="reg">注册</button> </div> </div>

三.当登录页面完成之后,我们与要对页面输入框做一个简单的非空验证。
这个过程较简单,直接附上代码

login.addEventListener('tap',function(){ var username=document.getElementById("username"); var password=document.getElementById("password"); if(username.value.length==0){ plus.ui.toast("用户名不能为空"); return; } if(password.value.length==0){ plus.ui.toast("密码不能为空"); return; }

这里写图片描述

原文链接:https://blog.csdn.net/zhuzhenxing886/article/details/51597095?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782390599918%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782390599918&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-22-51597095-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容