2. 程式人生 > >用js寫簡單頁面

用js寫簡單頁面

阿新 • • 發佈：2018-12-09
var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; var pwds=document.getElementsByClassName("passwordss")[0]; var tel=document.getElementsByClassName("tel")[0]; var email=document.getElementsByClassName("email"
)[0]; var picyzm=document.getElementsByClassName("picyzm")[0]; var yzm=document.getElementsByClassName("yzm")[0]; var zhuce=document.getElementsByClassName("zhuce")[0]; var span1=document.getElementsByClassName("span1")[0]; var span2=document.getElementsByClassName("span2"
)[0]; var span3=document.getElementsByClassName("span3")[0]; var span4=document.getElementsByClassName("span4")[0]; var span5=document.getElementsByClassName("span5")[0]; var span6=document.getElementsByClassName("span6")[0]; var ureg=/[a-zA-Z0-9]{4,}/
; var treg=/[0-9]{11}/; var ereg=/[@]{0}[A-Za-z]{3,}/g; username.onfocus=function(){ username.lastIndex=0; username.style.border="1px solid blue"; span1.innerHTML="使用者名稱支援數字和字母，位數至少為四位"; span1.style.color="blue"; username.value=""; } username.onblur=function(){ if(username.value==""){ span1.innerHTML="使用者名稱不能為空"; span1.style.color="red"; username.style.border="1px solid red"; } else if((username.value!="")&&(username.value.length<4)){ span1.innerHTML="使用者名稱長度錯誤"; span1.style.color="red"; username.style.border="1px solid red"; } else if(!ureg.test(username.value)){ username.style.border="1px solid red"; span1.innerHTML="使用者名稱輸入錯誤" span1.style.color="red"; }else{ username.style.border="1px solid #ccc"; } } pwd.onfocus=function(){ pwd.lastIndex=0; pwd.style.border="1px solid blue"; span2.innerHTML="密碼支援數字和字母，位數至少為四位"; span2.style.color="blue"; pwd.value=""; } pwd.onblur=function(){ if(pwd.value==""){ pwd.style.border="1px solid red"; span2.innerHTML="密碼不能為空"; span2.style.color="red"; } else if((pwd.value!="")&&(pwd.value.length<4)){ pwd.style.border="1px solid red"; span2.innerHTML="密碼長度錯誤"; span2.style.color="red"; } else if(!ureg.test(pwd.value)){ pwd.style.border="1px solid red"; span2.innerHTML="密碼輸入錯誤" span2.style.color="red"; }else{ pwd.style.border="1px solid #ccc"; } } pwds.onfocus=function(){ pwds.lastIndex=0; pwds.style.border="1px solid blue"; span3.innerHTML="再次輸入密碼"; span3.style.color="blue"; pwds.value=""; } pwds.onblur=function(){ if(pwds.value==""){ pwds.style.border="1px solid red"; span3.innerHTML="密碼不能為空"; span3.style.color="red"; } else if((pwds.value!="")&&(pwds.value.length<4)){ pwds.style.border="1px solid red"; span3.innerHTML="密碼長度錯誤"; span3.style.color="red"; } else if(!ureg.test(pwds.value)){ pwds.style.border="1px solid red"; span3.innerHTML="密碼格式輸入錯誤" span3.style.color="red"; }else if(pwd.value!=pwds.value){ pwds.style.border="1px solid red"; span3.innerHTML="兩次密碼不一致" span3.style.color="red"; }else{ pwds.style.border="1px solid #ccc"; } } tel.onfocus=function(){ tel.lastIndex=0; tel.style.border="1px solid blue"; span4.style.color="blue"; span4.innerHTML=""; tel.value=""; } tel.onblur=function(){ if(tel.value==""){ tel.style.border="1px solid red"; span4.innerHTML="手機不能為空"; span4.style.color="red"; }else if(!treg.test(tel.value)){ tel.style.border="1px solid red"; span4.innerHTML="手機長度錯誤" span4.style.color="red"; }else{ tel.style.border="1px solid #ccc"; } } email.onfocus=function(){ email.lastIndex=0; email.style.border="1px solid blue"; span5.style.color="blue"; span5.innerHTML=""; email.value=""; } email.onblur=function(){ if(email.value==""){ email.style.border="1px solid red"; span5.innerHTML="郵箱不能為空"; span5.style.color="red"; }else if(!ereg.test(email.value)){ email.style.border="1px solid red"; span5.innerHTML="郵箱輸入錯誤" span5.style.color="red"; }else{ email.style.border="1px solid #ccc"; } } picyzm.onclick=function(){ var num=Array(); var str=""; for(var i=0;i<4;i++){ num[i]=Math.floor(Math.random()*10); str+=num[i]; } picyzm.innerHTML=str; } yzm.onfocus=function(){ yzm.style.border="1px solid blue"; span6.style.color="blue"; span6.innerHTML=""; yzm.value=""; } yzm.onblur=function(){ if(yzm.value==""){ yzm.style.border="1px solid red"; span6.innerHTML="驗證碼不能為空"; span6.style.color="red"; }else if(yzm.value!=picyzm.innerHTML){ yzm.style.border="1px solid red"; span6.innerHTML="驗證碼輸入錯誤" span6.style.color="red"; }else{ yzm.style.border="1px solid #ccc"; } } zhuce.onclick=function(){ if((ureg.test(username.value))&&(ureg.test(pwd.value))&&(ureg.test(pwds.value)) &&(treg.test(tel.value))&&(ereg.test(email.value))&&(yzm.value==picyzm.innerHTML)){ zhuce.style.background="red"; } }

相關推薦

用js寫簡單頁面

var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; v

用js寫tab頁面

原理：依據bootStrap框架的tab頁樣式：原生態的是這樣： <!DOCTYPE html> <html>     <head>         <me

用js寫簡單選項卡

如圖，最簡單的純粹的選項卡 第一步，當然是先寫html程式碼和css樣式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> &

用nodejs寫簡單爬蟲抓取https淘寶頁面

2016-09-23 周海漢 2016.9.23 淘寶有很多反爬措施。其中https就是反爬措施之一。一般的支援http協議的爬取失效了。 nodejs 是採用google V8引擎寫成的javascript後臺框架。自從有

首次進入頁面的時候用js刷新頁面

function span url amp win mes 判斷 class times 　　　　window.onload = function(){ var url=document.location.href; //獲取瀏覽器訪問欄裏的地址

用JS寫，根據用戶輸入的年月份判斷是這年的第幾天

nth || AD lse quest 輸入 判斷 ear 月份 console.log("輸入年份："); let year = readline.question() - 0; console.log("輸入一個月份"); let month = readline.q

用js寫水仙花數

amp == 位數 等於 parse lse div 就是 () ...js //輸入一個三位數，水仙花數就是個位的三次方+十為的三次方+百位的三次方之和等於本身 console.log(‘請輸入一個三位數：‘); let a = readline.question(

用js寫一個秒錶

首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input onclick="ks()" type="button" name="" id="kaishi" value

用js寫一個秒表

tel 我們 java name func 取余 NPU 定時器1 cli 首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input o

前端與編譯原理——用JS寫一個JS直譯器

說起編譯原理，印象往往只停留在本科時那些枯燥的課程和晦澀的概念。作為前端開發者，編譯原理似乎離我們很遠，對它的理解很可能僅僅侷限於“抽象語法樹（AST）”。但這僅僅是個開頭而已。編譯原理的使用，甚至能讓我們利用JS直接寫一個能執行JS程式碼的直譯器。 專案地址： https:/

用JS寫的效果，怎樣讓下拉選單出現在下面的表格之上，而不是把下面表格推下去

這個是用浮動來做的. 在你要顯示的那個div裡面加個 position:absolute;z-index:999; 位置可能會和原來的有偏差. 不過沒事, 你可以慢慢調.z-index是設定優先順序的, 優先順序越高,就越顯示在最上面.當你的這個選單被覆蓋了試一下調調這個屬性

用js寫飛機大戰的小遊戲

飛機大戰思路整理 飛機大戰分為5個階段: 1.遊戲開始階段 1.0定義整個遊戲的全域性變數，並進行初始化 1.1.0建立遊戲背景圖片 1.1.1初始化背景圖片的資料 1.1.2建立遊戲開始階段的建構函式 *繪製方法 *運動方法 1.1.3建立遊戲開始的物件 1.1.4繪

用JS寫煩人右下角的彈窗小廣告

啦啦啦啦，寫一下最近JS的學習進度。 最近JS學了DOM、正則、定時器… 用定時器寫了一個右下角的彈窗廣告。 先寫一下定時器的基本概念 週期定時器：setInterval(function，每間隔多少s執行) 一次定時器：setTimeout(function，間隔多少s執行一次)

用JS重新整理指定頁面

先來看一個簡單的例子：下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。 frame.html 由上(top.html)下(bottom.html)兩個頁面組成，程式碼如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD H

用JS寫的一個好看的折線圖

之前做移動端專案的時候，有要顯示圖表的需求， 但是由於設計師設計的太漂亮， 一般的第三方控制元件不加修改的話都不太滿足， 如果引進了的話， 要修改的東西太多了， 也不好修改，廢話不多說， 先上圖：至於怎麼實現了，其實也蠻簡單的，canvas自己一個個畫的。以下是原始碼：/**

用JS寫Ajax的請求函式（1）

ajax：一種請求資料的方式，不需要重新整理整個頁面； ajax的技術核心是 XMLHttpRequest 物件； ajax 請求過程：建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料； function ajax(url,

用JS寫的一個簡易計時器

執行結果如圖：點選開始計時，就會顯示系統時間，然後這個時鐘會每秒更新，點選停止計時，這個時間就會停止。這個是簡易版本。程式碼如下：    1 <!DOCTYPE html>    2 <html lang="en">    3 <head>

用js實現簡單的網頁輪播圖

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <s

用js寫一個圖片漸變切換效果

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-s

用CSS寫一個簡單的幻燈片效果頁面

fill for tar mode stat xpl fir ng- 語法規則 這裏是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【用CSS