2. 程式人生 > >動態操作表格加簡單的表單驗證功能

動態操作表格加簡單的表單驗證功能

阿新 • • 發佈：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); } } }

相關推薦

動態操作表格加簡單的表單驗證功能

//判定名字是否合法函式 function checkUserName(username) { var isLegal = false; //判定字串長度是否符合標準

amaze UI 如何添加原生表單驗證

func 初始化 req dset 無法 加載 maxlength nbsp 驗證 這段時間做的一個項目，整個系統就一個頁面，然後就是各種模態框，js裏拼HTML代碼，而且因為表單空留距離小，最後選定了amaze ui原生的表單驗證 在amaze ui官網找到 表單驗證。

html5 實現的簡單表單驗證

平常我們做表單驗證的時候都是利用一些 js 庫或者自己去寫一些正則去匹配，最近看到 html5 裡面的 input 標籤上有一個 pattern 屬性裡面可以寫正則去驗證輸入框的內容，並且可以和:valid，:invalid 結合讓驗證視覺化，發現其實也可以用

JavaScript實現簡單表單驗證

在我們進行註冊的時候，把滑鼠點進“請輸入帳號”的輸入框時，輸入框的旁邊會有提示資訊，提示我們要輸入的資訊格式，在我們輸入後滑鼠點進下一個輸入框時，已經填寫過的輸入框會對於我們填入的內容進行判斷，若不符合要求會提示我們重新輸入，大致如下圖所示: 上述功能

javascript實現簡單使用者登入表單驗證功能

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <html> <head> <meta http-equiv="C

elment-ui表格中的表單驗證

elment-ui提供表單驗證，而在實際中表格里也涉及表單驗證，其關鍵點在於如何給表格中需要驗證的欄位動態新增prop，再給其繫結

jQuery學習-表單驗證功能

已經完成了一個簡陋的圖書館管理系統，之所以說是簡陋，是因為不具備任何容錯功能，下一階段是通過學習jQuery來對系統進行完善。 任務一：完成後臺登入頁面的表單驗證功能。 需求：1、對於使用者名稱和密碼的空白輸入情況，要阻止其對後臺伺服器發起的連線。 功能分析：1、選擇兩個標

jQuery簡單表單判斷，獲取框中的資料動態到新增表格

            var val = this.value;             // 遍歷並且判斷             $.each(cities, function(i, n) {                 // 判斷                 if(i == val) {   

表單驗證（為後期功能完善添加）

隱藏 ont with length type nbsp ava dex www. 一、表單驗證是否輸入為空，如果為空彈出alert。 function validate_required(field,alerttxt) { with (field) { if (valu

簡單的jquery表單驗證

append 提交 ren pre img als pri button font <tr>

jquery簡單的表單驗證密碼

submit click log function func put jquer wid post <tbody> <tr> <td style="width:25%">修改密碼:</td>

jQuery 表單驗證控制元件 比較簡單

學習jquery, 自己寫的一個基於jQuery的表單驗證練手 比較簡單  下載地位  http://download.csdn.net/detail/lpy3654321/7816687  不要積分的 頁面效果:  HTML 程

前端表單驗證的簡單封裝

做畢設做到表單驗證，一堆if else if return寫得我頭皮發麻，又不喜歡某些元件中自帶的驗證，寫起來不自由，我火起來就自己封裝了一個表單驗證。 功能：暫時只支援判空和正則表示式，目前的畢設專案夠用了，後期若遇到需求會繼續加 封裝 const formvalidate = (arr) =&g

angualrjs 簡單的form表單驗證

下面舉一個簡單的例子：提交表單時驗證，input為必填項  <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <t

[Swift通天遁地]二、表格表單-(18)快速應用多種預定義格式的表單驗證

本文將演示表單在提交時的資料驗證。 在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】 現在開始編寫程式碼，給表單新增驗證的功能。 1 import UIKit 2 //首先在當前類檔案中， 3 //引入以及安裝的第三方類庫 4 import

吃驚！強大的HTML5居然能使表單驗證變得如此如此簡單！！！

    （HTML5大神可以就此飄過，以前通過JS寫的那麼多的程式碼，現在通過HTML5居然可以怎麼簡單） ，廢話就少說了，直接上程式碼：<!DOCTYPE html> <html&

jquery獲取指定表格的指定列的值 以及 操作radio,checkbox,select表單操作實現程式碼

如圖id=table2的表其中一個td包含一個無名無ID的子表，我想要獲取該子表某td的內容(如dd這一個td的內容)，用jquery怎麼寫? 你想獲得 aaa ccc bbb ddd？ 那就這樣寫$(“#table2 table td‘).eq(0).fnd('t

JavaScriptDay2-簡單網頁表單驗證

Html部分 1 <!-- 2 登錄檔單 3 1-使用者名稱 text 4 2-密碼 password 5 3-確認密碼 password 6 4-性別 radio 7

動態新增刪除一行,js物件表單驗證

動態新增一行: /** * 新增一行 */ function addNewColumn(id,index) { //row_count = getNowRowCount(id); var html = ''; html += '<tr class="vers

angular-簡單的表單驗證註冊demo

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="angular-1.3.0.js"></