html 和 js 相互调用
2018-01-28 本文已影响0人
uniapp
学习了 html ，能够很快速的搭建出界面；学习了 js，能够处理各种界面元素的逻辑。二者需要结合起来才能玩转 html 。比如，下面一个简单界面的实现：
html和js相互调用
简单的登录操作界面通过 html 搭建，用户名和密码的判断通过js来实现。下面看详细的代码：
1 html 搭建界面
<body>
<form action="https://www.jianshu.com/u/5e618c136b79" onsubmit="return validateForm();">
<table>
<tr>
<td colspan="2" id="tipMsg" style="color: red; height: 30px;">
</td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username" id="username">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="text" name="pwd" id="pwd">
</td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value="登录" style="margin-left: 0px; margin-right: 0px; width: 100px; background-color: gray;margin-left: 0px;">
</td>
</tr>
</table>
</form>
</body>
其中 form 为表单标签，其 action 属性指定了提交成功后跳转的界面，onsubmit 属性指定了点击提交后，是否调转到 action 指定的界面。上文通过 validateForm 函数来判定，调用函数时别忘了加小括号（）。
2 逻辑处理
<script type="text/javascript">
function validateForm() {
var username = document.getElementById("username");
var pwd = document.getElementsByName("pwd")[0];
if (username.value=="") {
document.getElementById("tipMsg").innerHTML = "用户名不能为空"
return false;
}else{
document.getElementById("tipMsg").innerHTML = "";
}
if (pwd.value=="") {
document.getElementById("tipMsg").innerHTML = "密码不能为空"
return false;
}else{
document.getElementById("tipMsg").innerHTML = "";
}
document.getElementById("tipMsg").innerHTML = "登录成功"
return false;
}
</script>
可以通过调用 document 对象的 getElementById 或者 getElementsByName 方法来获取 html 中的界面元素， 然后通过 innerHTML 属性设置元素属性。
这是一个简单的Demo, 更详细的标签使用方式及其属性信息可以参考
html 的手册，资源在冬风破的github。
喜欢和关注都是对我的鼓励和支持~
