動態操作表格加簡單的表單驗證功能
阿新 • • 發佈:2018-12-09
//判定名字是否合法函式
function checkUserName(username) {
var isLegal = false;
//判定字串長度是否符合標準
if (username.length >= 3 && username.length <= 12){
//判定字串首字元是否為小寫字母
if (username.charCodeAt(0 ) >= 97 && username.charCodeAt(0) <= 122){
//判定字串2~最後一位是否符合標準
for (var i = 1;i < username.length;i ++){
//判定第i個字元是否為小寫字母
if (username.charCodeAt(i) >= 97 && username.charCodeAt(i) <= 122 ){
isLegal = true;
//判定第i個字元是否為數字
} else if (!isNaN(username[i])){
isLegal = true;
//判定第i個字元是否為下劃線
} else if (username[i] == '_' ){
isLegal = true;
//以上都不符合直接false並跳出整個迴圈
} else {
isLegal = false;
break;
}
}
}
}
return isLegal;
}
window.onload = function() {
var addBtn = document.getElementById('addBtn');
var sid = document.getElementById('sid');
var sname = document.getElementById('sname');
var sage = document.getElementById('sage');
var table1 = document.getElementById('table1');
//新增資料模組
addBtn.onclick = function() {
//判定使用者輸入是否合法模組
if (sid.value == '' || sname.value == '' || sage.value == '') {
alert('請輸入內容後點確定!');
sid.value = '';
sname.value = '';
sage.value = '';
return;
} else if (isNaN(sid.value) || isNaN(sage.value)) {
alert('編號和年齡必須為數字!');
sid.value = '';
sname.value = '';
sage.value = '';
return;
} else if (sage.value < 0 || sage.value > 100){
alert('你家正常年齡能為' + sage.value + '歲啊!');
sid.value = '';
sname.value = '';
sage.value = '';
return;
} else if (checkUserName(sname.value) == false){
alert('請輸入一個合法的名字!');
sid.value = '';
sname.value = '';
sage.value = '';
}
//通過判定後整理資料
var info = [sid.value,sname.value,sage.value];
//拼接字串,整理出一整行資料
var str = '';
str += '<tr>';
for (var i = 0; i < 4; i++) {
str += '<td>';
if (i < 3) {
str += info[i];
} else {
str += '<input type="button" value="刪除" class="delBtn"/>';
}
str += '</td>';
}
str += '</tr>';
//將這行資料新增到table1中
table1.innerHTML += str;
//清空使用者輸入值
sid.value = '';
sname.value = '';
sage.value = '';
}
//清除資料模組
table1.onclick = function(e) {
e = window.event || e;
//獲取使用者點選的是哪一行中的某個物件
var currObj = e.target || e.srcElement;
//判定使用者點選的是否是刪除按鈕
if (currObj.className == 'delBtn') {
//用過刪除按鈕的節點找到其那一行的tr節點並徹底清空
currObj.parentNode.parentNode.outerHTML = '';
// var tr = currObj.parentNode.parentNode;
// var tbody = tr.parentNode;
// tbody.removeChild(tr);
}
}
}