用js設計一個註冊頁面(用js編寫一個註冊頁面)

本文目錄一覽:

javascript 註冊頁面設計

純JS完成? 具體哪些功能?

頁面1:

reg.html

html

head

script

function checkForm (obj) {

var ele = obj.elements;

for (var i = 0; i ele.length; ++i) {

var e = ele[i];

if (e.name) {

if (e.type == ‘select-one’) {

if (e.options[e.selectedIndex].value == ”) {

alert(‘請選擇籍貫’);

return false;

}

else {

continue;

}

}

else if (e.type == ‘select-multiple’) {

continue;

}

else if (e.type == ‘checkbox’ || e.type == ‘radio’) {

var checkObj = document.getElementsByName(e.name);

var check = false;

for (var j = 0; j checkObj.length; ++j) {

if (checkObj[j].checked) {

check = true;

}

}

if (!check) {

alert(‘請做出選擇,性別或愛好’);

return false;

}

}

else if (e.type == ‘button’) {

continue;

}

else if (e.type==’hidden’) {

continue;

}

else if (typeof e.value != ‘undefined’ e.value != ” e.style.visibility != ‘hidden’) {

continue;

}

else {

alert(‘用戶或密碼,年齡為空’);

return false;

}

}

}

return true;

}

/script

/head

body

form id=”form1″ method=”get” action=”reg_save.html” onsubmit=”return checkForm(this)”

table width=”343″ border=”0″ cellspacing=”0″ cellpadding=”0″

tr

td height=”43″ colspan=”2″註冊/td

/tr

tr

td width=”157″ height=”32″姓名:/td

td width=”186″input type=”text” name=”username” id=”username” //td

/tr

tr

td width=”157″ height=”32″密碼:/td

td width=”186″input type=”password” name=”passwd” id=”passwd” //td

/tr

tr

td height=”37″年齡:/td

tdinput type=”text” name=”txtAge” id=”textfield2″/td

/tr

tr

td height=”36″性別:/td

tdinput name=”sex” type=”radio” id=”sex1″ value=”男”

input type=”radio” name=”sex” id=”sex2″ value=”女”

女/td

/tr

tr

td height=”41″籍貫:/td

tdselect name=”jiguan” id=”select”

option value=””請選擇/option

option value=”廣東”廣東/option

option value=”湖南”湖南/option

option value=”廣西”廣西/option

option value=”湖北”湖北/option

option value=”北京”北京/option

option value=”上海”上海/option

/select/td

/tr

tr

td height=”35″愛好: /td

tdinput type=”checkbox” name=”hobby” id=”hobby1″ value=”看書”

看書

input name=”hobby” type=”checkbox” id=”hobby2″ value=”上網” /

上網

input type=”checkbox” name=”hobby” id=”hobby3″ value=”運動” 運動/td

/tr

tr

td /td

tdinput type=”submit” name=”tijiao” id=”tijiao” value=”提交”/td

/tr

/table

/form

/body

/html

=========

頁面2:

reg_save.html

html

head

/head

body

script

var request = {

QueryString : function(val) {

var uri = window.location.search;

var re = new RegExp(“” +val+ “\=([^\\?]*)”, “ig”);

return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);

},

QueryStrings : function() {

var uri = window.location.search;

var re = /\w*\=([^\\?]*)/ig;

var retval=[];

while ((arr = re.exec(uri)) != null)

retval.push(arr[0]);

return retval;

}

}

var q = request.QueryStrings();

for (var i in q) {

document.write(decodeURIComponent(q[i]) + ‘br /’);

}

/script

/body

/html

如何用htmljavascript設計一個用戶註冊窗口?

詳見代碼。

具體代碼如下:

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

link href=”css/regist.css” rel=”stylesheet” type=”text/css”

title網上購物系統/title

script type=”text/javascript”

var reg=/^[a-zA-Z]\w*$/;

var flag1=false,flag2=false,flag3=false;

function chang1(obj){

var name=obj.value;

if(name.length3||name.length8){

//alert(“密碼要求3-8位!”);

document.getElementById(“usName”).innerHTML=”font color=’red’ 用戶名要求3-8位!/font”;

}

else if(!reg.test(name)){

//alert(“用戶名由字母開頭,後字母、數字或下劃線!”);

document.getElementById(“usName”).innerHTML=”font color=’red’ 用戶名由字母開頭,後字母、數字或下劃線/font”;

flag1=false;

JavaScript+html設計一個用戶註冊頁面

var reg=/^[a-zA-Z]\w*$/; var flag1=false,flag2=false,flag3=false; function chang1(obj){ var name=obj.value; if(name.length3||name.length8){ //alert(“密碼要求3-8位!”); document.getElementById(“usName”).innerHTML=” 用戶名要求3-8位!”; } else if(!reg.test(name)){ //alert(“用戶名由字母開頭,後字母、數字或下劃線!”); document.getElementById(“usName”).innerHTML=” 用戶名由字母開頭,後字母、數字或下劃線”; flag1=false;

JS寫簡單註冊頁面的問題

用innerHTML屬性更改文本,以密碼後面為例。節點可能會找錯,我找的是font標籤

var ofont = var ofont = document.getElementsByTagName(“font”)[0];

ofont.innerHTML = “不能為空”;

這樣font中的文字就會被更改了

如何用jquery做一個註冊頁面

首先,jquery 是一個js 的框架或插件,如果要做頁面的話,是需要:html + css + js(jquery)的。單獨用jquery做註冊是不科學的。

可以先用html畫結構,然後加上css美化一下,用jquery做點擊提交和校驗操作。

編寫一個註冊網頁,求js文件

很簡單!我這裡只說說大體思路,所提供的JS代碼可以根據需要擴展,也可以直接拿來用!

思路:在表單(Form)中,註冊頁面用的最常見的就是Input控件,我們可以利用W3C為我們提供的HTML DOM對象,通過JS函數(或方法)來實現對錶單控件是否為空的判斷。

實現:在一個頁面中,具有相同標籤的表單控件會被瀏覽器看作一個以數字為下標的標籤數組,例如:在你設計的表單中有8個文本框,訪問它們時的數字下標就是0-7,我們通過一個簡單的For循環,來測試8個文本框是否為空,然後決定是否可以跳轉到下一個頁面。

代碼:

script type=text/javascript

function checkInput()

{

var In=document.getElementByTagName(“input”);//注意,getElementByTagName函數會把所有的input控件納入數組,包括text(文本框)、checkbox(複選框)、radio(單選框)、hidden(隱藏域)等。

for(var i=0;iIn.length;i++)

{

if(In[i].type==”text” In[i].value==””)//如果是文本框並且為空(即沒有輸入任何字符)

{

alert(“表單沒有填完整,請檢查!”);

return;

}

if(In[i].type==”password” In[i].value==””)//如果是密碼輸入框且密碼為空)

{

alert(“表單沒有填完整,請檢查!”);

return;

}

}

/script

*把以上代碼嵌入到head/head之間,然後在form標籤中加入onsubmit=checkInput()或者在input type=submit中插入onclick=checkInput()均可實現對文本框、密碼框判斷是否為空的功能。

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/298010.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-28 12:17
下一篇 2024-12-28 12:17

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • 打包後頁面空白的解決方案

    當我們在調試階段時,我們的app可能看起來完美無缺,但當我們進行打包時,在運行app時,我們可能會遇到白屏或空白的問題。在這篇文章中,我們將探討如何解決這種問題。 一、檢查文件路徑…

    編程 2025-04-29
  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數,它會將b…

    編程 2025-04-29
  • Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的問題。同時,給出一些相關示例代碼,以幫助讀者更好的理解並處理這個問題。 一、問題解…

    編程 2025-04-29
  • t3.js:一個全能的JavaScript動態文本替換工具

    t3.js是一個非常流行的JavaScript動態文本替換工具,它是一個輕量級庫,能夠很容易地實現文本內容的遞增、遞減、替換、切換以及其他各種操作。在本文中,我們將從多個方面探討t…

    編程 2025-04-28
  • Python操作Web頁面

    本文將從多個方面詳細介紹Python操作Web頁面的技巧、方法和注意事項。 一、安裝必要的庫 在Python中操作Web頁面,需要用到一些第三方庫。 pip install req…

    編程 2025-04-28
  • JS圖片沿着SVG路徑移動實現方法

    本文將為大家詳細介紹如何使用JS實現圖片沿着SVG路徑移動的效果,包括路徑製作、路徑效果、以及實現代碼等內容。 一、路徑製作 路徑的製作,我們需要使用到SVG,SVG是可縮放矢量圖…

    編程 2025-04-27
  • 如何使用JS調用Python腳本

    本文將詳細介紹通過JS調用Python腳本的方法,包括使用Node.js、Python shell、child_process等三種方法,以及在Web應用中的應用。 一、使用Nod…

    編程 2025-04-27
  • PHP登錄頁面代碼實現

    本文將從多個方面詳細闡述如何使用PHP編寫一個簡單的登錄頁面。 1. PHP登錄頁面基本架構 在PHP登錄頁面中,需要包含HTML表單,用戶在表單中輸入賬號密碼等信息,提交表單後服…

    編程 2025-04-27
  • 如何反混淆美團slider.js

    本文將從多個方面詳細闡述如何反混淆美團slider.js。在開始之前,需要明確的是,混淆是一種保護JavaScript代碼的方法,其目的是使代碼難以理解和修改。因此,在進行反混淆操…

    編程 2025-04-27

發表回復

登錄後才能評論