在上次的表单验证上添加少许代码就可以做成一个简单留言板,本地版本意味着只能在自己电脑的浏览器的使用,并且页面刷新后数据就不存在了.看一下如何实现的吧.
说明:方便起见,简单留言板的每一条留言使用一个div表示.这只是一个比较简单实例.用于演示JS如何添加新的元素.
1. JS实现
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在JS上添加处理函数
创建一个div新元素,把文本框的值作为该元素的内容,然后把新元素添加到留言板的div中.
// 添加数据
function addMsg() {
// 创建div
var temp = document.createElement("div");
// 设置div文本内容
temp.innerHTML = txt_submit.value;
// 添加div
msg_board.appendChild(temp);
// 清空输入框
txt_submit.value = "";
}
JS添加新元素三步骤:
创建
设置
添加
修改提交按钮的处理函数
btn_submit.onclick = function() {
// 如果验证失败返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新页面
return false;
};
实例中提交按钮返回false,主要用于禁用提交按钮提交数据,导致页面刷新,数据丢失.
JS完整代码
2. JQuery实现
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在JQuery上添加处理函数
创建一个div新元素,把文本框的值作为该元素的内容,然后把新元素添加到留言板的div中.
// 添加数据
function addMsg() {
// 创建div
var temp = $("<div>");
// 设置div文本内容
temp.html($("#txt_submit").val());
// 添加div
$("#msg_board").append(temp);
// 清空输入框
$("#txt_submit").val("");
}
- 修改提交按钮的处理函数
// 提交时验证
$("#btn_submit").click(function() {
// 如果验证失败返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新页面
return false;
});
实例中提交按钮返回false,主要用于禁用提交按钮提交数据,导致页面刷新,数据丢失.
JQuery完整代码
JQuery处理方式与JS处理方式几乎完全一致.
3. AngularJS实现
- 在表单验证实例的基础上,创建模板和控制器
var boardModule = angular.module("boardModule", []);
boardModule.controller("boardController", ["$scope", function($scope) {
// 其他代码...
}]);
- 在HTML引入模板和控制器
<body ng-app="boardModule" ng-controller="boardController">
// 其他代码...
</body>
- 在HTML追加上表示留言板的
div
<div>
<div ng-repeat="m in messages">{{m}}</div>
</div>
- 给提交按钮添加单击事件函数
<button ng-disabled="testForm.$invalid" type="submit" ng-click="addMsg()">提交</button>
- 在控制器中实现单击事件函数
// 初始化
$scope.messages = [];
$scope.test = "";
// 添加
$scope.addMsg = function() {
// 添加数据
$scope.messages.push($scope.test);
// 清空输入框/
$scope.test = "";
// 返回false,禁用提交,不刷新页面
return false;
}
如有任何疑问，欢迎下面留言
