在上次的表單驗證上添加少許代碼就可以做成一個簡單留言板,本地版本意味著只能在自己電腦的瀏覽器的使用,并且頁面刷新后數(shù)據(jù)就不存在了.看一下如何實現(xiàn)的吧.
說明:方便起見,簡單留言板的每一條留言使用一個div表示.這只是一個比較簡單實例.用于演示JS如何添加新的元素.
1. JS實現(xiàn)
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在JS上添加處理函數(shù)
創(chuàng)建一個div新元素,把文本框的值作為該元素的內(nèi)容,然后把新元素添加到留言板的div中.
// 添加數(shù)據(jù)
function addMsg() {
// 創(chuàng)建div
var temp = document.createElement("div");
// 設(shè)置div文本內(nèi)容
temp.innerHTML = txt_submit.value;
// 添加div
msg_board.appendChild(temp);
// 清空輸入框
txt_submit.value = "";
}
JS添加新元素三步驟:
創(chuàng)建
設(shè)置
添加
修改提交按鈕的處理函數(shù)
btn_submit.onclick = function() {
// 如果驗證失敗返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新頁面
return false;
};
實例中提交按鈕返回false,主要用于禁用提交按鈕提交數(shù)據(jù),導(dǎo)致頁面刷新,數(shù)據(jù)丟失.
JS完整代碼
2. JQuery實現(xiàn)
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在JQuery上添加處理函數(shù)
創(chuàng)建一個div新元素,把文本框的值作為該元素的內(nèi)容,然后把新元素添加到留言板的div中.
// 添加數(shù)據(jù)
function addMsg() {
// 創(chuàng)建div
var temp = $("<div>");
// 設(shè)置div文本內(nèi)容
temp.html($("#txt_submit").val());
// 添加div
$("#msg_board").append(temp);
// 清空輸入框
$("#txt_submit").val("");
}
- 修改提交按鈕的處理函數(shù)
// 提交時驗證
$("#btn_submit").click(function() {
// 如果驗證失敗返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新頁面
return false;
});
實例中提交按鈕返回false,主要用于禁用提交按鈕提交數(shù)據(jù),導(dǎo)致頁面刷新,數(shù)據(jù)丟失.
JQuery完整代碼
JQuery處理方式與JS處理方式幾乎完全一致.
3. AngularJS實現(xiàn)
- 在表單驗證實例的基礎(chǔ)上,創(chuàng)建模板和控制器
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>
- 給提交按鈕添加單擊事件函數(shù)
<button ng-disabled="testForm.$invalid" type="submit" ng-click="addMsg()">提交</button>
- 在控制器中實現(xiàn)單擊事件函數(shù)
// 初始化
$scope.messages = [];
$scope.test = "";
// 添加
$scope.addMsg = function() {
// 添加數(shù)據(jù)
$scope.messages.push($scope.test);
// 清空輸入框/
$scope.test = "";
// 返回false,禁用提交,不刷新頁面
return false;
}
如有任何疑問口猜，歡迎下面留言
