js授權驗證代碼,驗證碼代碼實現

本文目錄一覽:

JS表單驗證代碼

我就簡單的寫個 希望可以幫助您

==================================

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

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

title測試頁面/title

script type=”text/javascript”

function checkform(){

//驗證用戶名

if($(“username”).value == “”){

$(“n_msg”).innerHTML =”用戶名不可以為空”;

$(“username”).select();

$(“username”).focus();

return false;

}else{

if($(“username”).value.length 6){

$(“n_msg”).innerHTML = “用戶名必須大於6個字符”;

$(“username”).select();

$(“username”).focus();

return false;

}

}

//驗證密碼

if($(“password”).value == “”){

$(“p_msg”).innerHTML =”密碼不可以為空”;

$(“password”).select();

$(“password”).focus();

return false;

}else{

if($(“password”).value.length 10){

$(“p_msg”).innerHTML = “密碼必須大於10個字符”;

$(“password”).select();

$(“password”).focus();

return false;

}

}

//…..(下面的可以以此類推)

return true;

}

function $(id){

return document.getElementById(id);

}

/script

style type=”text/css”

body{ font:12px 宋體}

.c_red{ color:#f00}

/style

/head

body

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

form method=”post” onsubmit=”return checkform()”

tr

td width=”89″用戶名/td

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

td width=”188″ id=”n_msg” class=”c_red”/td

/tr

tr

td密碼/td

tdinput name=”password” type=”password” id=”password” //td

td id=”p_msg” class=”c_red”/td

/tr

tr

td colspan=”3″input name=”sub” type=”submit” id=”sub” value=”提交” //td

/tr

/form

/table

/body

/html

===========================

上面的為代碼部分 我已經調試沒問題 希望可以幫助您

祝早日解決~

註冊時 驗證用的js代碼

使用兩個正則表達式:

/^[^0-9\s]+$/;

/^[a-zA-Z_]+$/;

下面是測試代碼【附件是測試文件】:

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

名:input id=”name” type=”text” value=”” onblur=”check()” /label id=”nTips”/labelbr /

姓:input id=”xing” type=”text” value=””  onblur=”check()” /label id=”xTips”/labelbr /

登錄名稱:input id=”ID” type=”text” value=””  onblur=”check()” /label id=”idTips”/labelbr /

script type=”text/javascript”

//1.名字(不能為空且不能有數字) 2.姓氏 (不能為空且不能有數字) 3.登錄名 (不能為空,且只能包括字母且只能包括字母。數字和下劃線字符。

var $=function (id){return document.getElementById(id);}

function check(){

reg1=/^[^0-9\s]+$/;

reg2=/^[a-zA-Z_]+$/;

if(!reg1.test($(“name”).value)){

 $(“nTips”).innerHTML=”不能為空且不能有數字”

 return false;

 }

 else{

 $(“nTips”).innerHTML=”radic;”; 

  }

if(!reg1.test($(“xing”).value)){

 $(“xTips”).innerHTML=”不能為空且不能有數字”

 return false;

 }

 else{

 $(“xTips”).innerHTML=”radic;”; 

  }

if(!reg2.test($(“ID”).value)){

 $(“idTips”).innerHTML=”不能為空,且只能包括字母。數字和下劃線字符。”

 return false;

 }

 else{

 $(“idTips”).innerHTML=”radic;”; 

  }

 return true; 

}

/script

js 驗證代碼

改成這樣試試看。一般我是不加elseif的。刪掉試試看。然後就後再加return true;代碼如下:if(document.form1.amount.value.length1)

{

var mem_value = form1.amount.value;

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

{

if(mem_value.charAt(i)’0′ || mem_value.charAt(i)’9′)

{

alert(“產品數量只能為數字!”);

document.form1.amount.focus();

return false;

}

}

}if(document.form1.price.value.length1)

{

var mem = form1.price.value;

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

{

if(mem.charAt(i)’0′ || mem.charAt(i)’9′)

{

alert(“單價只能為數字!”);

document.form1.price.focus();

return false;

}

}

}return true;

如何用js寫驗證碼程序?

方法/步驟

打開網頁編輯器編寫div+css代碼,先把界面做好,然後再做功能,代碼如下所示:

form name=”form1″

請輸入要產生的驗證碼的位數:input type=”text” name=”digit” id=”digit”

brbr

input type=”button” value=”生成” onClick=”deal()”

nbspinput type=”button” value=”刷新” onClick=”qc()”

brbr

div id=”result”/div

/form

請點擊輸入圖片描述

寫好之後,我們寫CSS代碼,然後再調試一下,爭取在前台顯示的美觀一些。CSS代碼如下所示:

style

body{background:#ccc;  }

form{margin-left:20%; margin-top:10%; }

/style

請點擊輸入圖片描述

弄好之後用瀏覽器打開,界面如下圖所示:

請點擊輸入圖片描述

弄好前端界面之後,我們就需要寫JS了,步驟主要如下所示,首先我們先定義一個參數,這個參數是我們輸入文本框的數字,生成隨機數用到了random方法,先看第一個方法,第一個方法我們用for循環來顯示出隨機數的個數。代碼如下所示:

function cg(digit)

{

var result=””;

for(i=0;iparseInt(digit);i++)

{

result=result+(parseInt(Math.random()*10)).toString();

}

return  result;

}

請點擊輸入圖片描述

第一個函數寫好後我們來看第二個,第二個函數是輸出生成的驗證碼,代碼很少:如下所示(含刪除代碼)

function deal()

{

result.innerHTML=”產生的驗證碼是:”+cg(form1.digit.value);

}

function qc()

{

form1.digit.value=””;

}

請點擊輸入圖片描述

寫好之後,我們驗證一下,我在文本框內輸入5,結果輸出了5個數字,結果顯示沒有錯誤。

請點擊輸入圖片描述

當然這麼寫也是有BUG的,例如輸入0、負數、或者小於1的小數都不會生成驗證碼。如果大家有興趣,可以修改這些BUG。

請點擊輸入圖片描述

js註冊表單驗證代碼

JS函數:

function check(){

    var username = document.getElementById(“username”).value;

    var pass1 = document.getElementById(“password”).value;

    var pass2 = document.getElementById(“confirm_password”).value;

 

    if (username == “”|| username == NULL || pass1 == “” || pass1 == NULL || pass2 == NULL || pass2 == “”) {

        alert(“用戶名或密碼不得為空!”);

        return false;

    }

}

表單提交的時候驗證:

input name=”reg” type=”submit”  value=”提交” onclick=”return check()”/

自己補全。

原創文章,作者:RIPQ,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/141973.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
RIPQ的頭像RIPQ
上一篇 2024-10-09 09:53
下一篇 2024-10-10 08:46

相關推薦

  • JS Proxy(array)用法介紹

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

    編程 2025-04-29
  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29
  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例,幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    編程 2025-04-29

發表回復

登錄後才能評論