js的優秀代碼04,js經典代碼

本文目錄一覽：

• 1、求一段JS的函數代碼….
• 2、如何寫高質量的JS，Html5前端代碼
• 3、前端開發，如何寫出優秀js代碼

求一段JS的函數代碼….

1:js 字符串長度限制、判斷字符長度 、js限制輸入、限制不能輸入、textarea 長度限制

2.:js判斷漢字、判斷是否漢字 、只能輸入漢字

3:js判斷是否輸入英文、只能輸入英文

4:js只能輸入數字,判斷數字、驗證數字、檢測數字、判斷是否為數字、只能輸入數字

5:只能輸入英文字符和數字

6: js email驗證 、js 判斷email 、信箱/郵箱格式驗證

7:js字符過濾,屏蔽關鍵字

8:js密碼驗證、判斷密碼

2.1: js 不為空、為空或不是對象 、判斷為空 、判斷不為空

2.2:比較兩個表單項的值是否相同

2.3:表單只能為數字和」_」,

2.4:表單項輸入數值/長度限定

2.5:中文/英文/數字/郵件地址合法性判斷

2.6:限定表單項不能輸入的字符

2.7表單的自符控制

2.8:form文本域的通用校驗函數

1. 長度限制

script

function test()

{

if(document.a.b.value.length50)

{

alert(」不能超過50個字符！」);

document.a.b.focus();

return false;

}

}

/script

form name=a onsubmit=」return test()」

textarea name=」b」 cols=」40″ wrap=」VIRTUAL」 rows=」6″/textarea

input type=」submit」 name=」Submit」 value=」check」

/form

2. 只能是漢字

input onkeyup=」value=」/oblog/value.replace(/[^\u4E00-\u9FA5]/g,」)」

3.」 只能是英文

script language=javascript

function onlyEng()

{

if(!(event.keyCode=65event.keyCode=90))

event.returnvalue=false;

}

/script

input onkeydown=」onlyEng();」

4. 只能是數字

script language=javascript

function onlyNum()

{

if(!((event.keyCode=48event.keyCode=57)||(event.keyCode=96event.keyCode=105)))

//考慮小鍵盤上的數字鍵

event.returnvalue=false;

}

/script

input onkeydown=」onlyNum();」

5. 只能是英文字符和數字

input onkeyup=」value=」/oblog/value.replace(/[\W]/g,」」) 「onbeforepaste=」clipboardData.setData(』text』,clipboardData.getData(』text』).replace(/[^\d]/g,」))」

6. 驗證郵箱格式

SCRIPT LANGUAGE=javascript RUNAT=Server

function isEmail(strEmail) {

if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)

return true;

else

alert(」oh」);

}

/SCRIPT

input type=text onblur=isEmail(this.value)

7. 屏蔽關鍵字(這裡屏蔽***和****)

script language=」javascript1.2″

function test() {

if((a.b.value.indexOf (」***」) == 0)||(a.b.value.indexOf (」****」) == 0)){

alert(」:)」);

a.b.focus();

return false;}

}

/script

form name=a onsubmit=」return test()」

input type=text name=b

input type=」submit」 name=」Submit」 value=」check」

/form

8. 兩次輸入密碼是否相同

FORM METHOD=POST ACTION=」”

input type=」password」 id=」input1″

input type=」password」 id=」input2″

input type=」button」 value=」test」 onclick=」check()」

/FORM

script

function check()

{

with(document.all){

if(input1.value!=input2.value)

{

alert(」false」)

input1.value = 「」;

input2.value = 「」;

}

else document.forms[0].submit();

}

}

/script

夠了吧 :)

屏蔽右鍵 很酷

oncontextmenu=」return false」 ondragstart=」return false」 onselectstart=」return false」

加在body中

二

2.1 表單項不能為空

script language=」javascript」

!–

function CheckForm()

{

if (document.form.name.value.length == 0) {

alert(」請輸入您姓名!」);

document.form.name.focus();

return false;

}

return true;

}

–

/script

2.2 比較兩個表單項的值是否相同

script language=」javascript」

!–

function CheckForm()

if (document.form.PWD.value != document.form.PWD_Again.value) {

alert(」您兩次輸入的密碼不一樣！請重新輸入.」);

document.ADDUser.PWD.focus();

return false;

}

return true;

}

–

/script

2.3 表單項只能為數字和」_」,用於電話/銀行帳號驗證上,可擴展到域名註冊等

script language=」javascript」

!–

function isNumber(String)

{

var Letters = 」1234567890-」; //可以自己增加可輸入值

var i;

var c;

if(String.charAt( 0 )==』-‘)

return false;

if( String.charAt( String.length – 1 ) == 』-』 )

return false;

for( i = 0; i String.length; i ++ )

{

c = String.charAt( i );

if (Letters.indexOf( c ) 0)

return false;

}

return true;

}

function CheckForm()

{

if(! isNumber(document.form.TEL.value)) {

alert(」您的電話號碼不合法！」);

document.form.TEL.focus();

return false;

}

return true;

}

–

/script

2.4 表單項輸入數值/長度限定

script language=」javascript」

!–

function CheckForm()

{

if (document.form.count.value 100 || document.form.count.value 1)

{

alert(」輸入數值不能小於零大於100!」);

document.form.count.focus();

return false;

}

if (document.form.MESSAGE.value.length10)

{

alert(」輸入文字小於10!」);

document.form.MESSAGE.focus();

return false;

}

return true;

}

//–

/script

2.5 中文/英文/數字/郵件地址合法性判斷

SCRIPT LANGUAGE=」javascript」

!–

function isEnglish(name) //英文值檢測

{

if(name.length == 0)

return false;

for(i = 0; i name.length; i++) {

if(name.charCodeAt(i) 128)

return false;

}

return true;

}

function isChinese(name) //中文值檢測

{

if(name.length == 0)

return false;

for(i = 0; i name.length; i++) {

if(name.charCodeAt(i) 128)

return true;

}

return false;

}

function isMail(name) // E-mail值檢測

{

if(! isEnglish(name))

return false;

i = name.indexOf(」 at 」);

j = name dot lastIndexOf(」 at 」);

if(i == -1)

return false;

if(i != j)

return false;

if(i == name dot length)

return false;

return true;

}

function isNumber(name) //數值檢測

{

if(name.length == 0)

return false;

for(i = 0; i name.length; i++) {

if(name.charAt(i) 」0″ || name.charAt(i) 」9″)

return false;

}

return true;

}

function CheckForm()

{

if(! isMail(form.Email.value)) {

alert(」您的電子郵件不合法！」);

form.Email.focus();

return false;

}

if(! isEnglish(form.name.value)) {

alert(」英文名不合法！」);

form.name.focus();

return false;

}

if(! isChinese(form.cnname.value)) {

alert(」中文名不合法！」);

form.cnname.focus();

return false;

}

if(! isNumber(form.PublicZipCode.value)) {

alert(」郵政編碼不合法！」);

form.PublicZipCode.focus();

return false;

}

return true;

}

//–

/SCRIPT

2.6 限定表單項不能輸入的字符

script language=」javascript」

!–

function contain(str,charset)// 字符串包含測試函數

{

var i;

for(i=0;icharset.length;i++)

if(str.indexOf(charset.charAt(i))=0)

return true;

return false;

}

function CheckForm()

{

if ((contain(document.form.NAME.value, 」%\(\)」)) || (contain(document.form.MESSAGE.value, 」%\(\)」)))

{

alert(」輸入了非法字符」);

document.form.NAME.focus();

return false;

}

return true;

}

//–

/script

1. 檢查一段字符串是否全由數字組成

—————————————

script language=」Javascript」!–

function checkNum(str){return str.match(/\D/)==null}

alert(checkNum(」1232142141″))

alert(checkNum(」123214214a1″))

// –/script

2. 怎麼判斷是否是字符

—————————————

if (/[^\x00-\xff]/g.test(s)) alert(」含有漢字」);

else alert(」全是字符」);

3. 怎麼判斷是否含有漢字

—————————————

if (escape(str).indexOf(」%u」)!=-1) alert(」含有漢字」);

else alert(」全是字符」);

4. 郵箱格式驗證

—————————————

//函數名：chkemail

//功能介紹：檢查是否為Email Address

//參數說明：要檢查的字符串

//返回值：0：不是 1：是

function chkemail(a)

{ var i=a.length;

var temp = a.indexOf(』@’);

var tempd = a.indexOf(』.’);

if (temp 1) {

if ((i-temp) 3){

if ((i-tempd)0){

return 1;

}

}

}

return 0;

}

5. 數字格式驗證

—————————————

//函數名：fucCheckNUM

//功能介紹：檢查是否為數字

//參數說明：要檢查的數字

//返回值：1為是數字，0為不是數字

function fucCheckNUM(NUM)

{

var i,j,strTemp;

strTemp=」0123456789″;

if ( NUM.length== 0)

return 0

for (i=0;iNUM.length;i++)

{

j=strTemp.indexOf(NUM.charAt(i));

if (j==-1)

{

//說明有字符不是數字

return 0;

}

}

//說明是數字

return 1;

}

6. 電話號碼格式驗證

—————————————

//函數名：fucCheckTEL

//功能介紹：檢查是否為電話號碼

//參數說明：要檢查的字符串

//返回值：1為是合法，0為不合法

function fucCheckTEL(TEL)

{

var i,j,strTemp;

strTemp=」0123456789-()# 「;

for (i=0;iTEL.length;i++)

{

j=strTemp.indexOf(TEL.charAt(i));

if (j==-1)

{

//說明有字符不合法

return 0;

}

}

//說明合法

return 1;

}

7. 判斷輸入是否為中文的函數

—————————————

function ischinese(s){

var ret=true;

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

ret=ret (s.charCodeAt(i)=10000);

return ret;

}

8. 綜合的判斷用戶輸入的合法性的函數

—————————————

script language=」javascript」

//限制輸入字符的位數開始

//m是用戶輸入，n是要限制的位數

function issmall(m,n)

{

if ((mn) (m0))

{

return(false);

}

else

{return(true);}

}

9. 判斷密碼是否輸入一致

—————————————

function issame(str1,str2)

{

if (str1==str2)

{return(true);}

else

{return(false);}

}

10. 判斷用戶名是否為數字字母下滑線

—————————————

function notchinese(str){

var reg=/[^A-Za-z0-9_]/g

if (reg.test(str)){

return (false);

}else{

return(true); }

}

2.8. form文本域的通用校驗函數

—————————————

作用：檢測所有必須非空的input文本，比如姓名，賬號，郵件地址等等。

該校驗現在只針對文本域，如果要針對form裏面的其他域對象，可以改變判斷條件。

使用方法：在要檢測的文本域中加入title文字。文字是在提示信息，你要提示給用戶的該字段的中文名。比如要檢測用戶名

html如下input name=」txt_1″ title=」姓名」,當然，最好用可視化工具比如dreamweaver什麼的來編輯域。

如果要檢測數字類型數據的話，再把域的id統一為sz.

javascript判斷日期類型比較麻煩，所以就沒有做日期類型校驗的程序了.高手可以補充。

程序比較草，只是提供一個思路。拋磚引玉！ ：）

哦，對了，函數調用方法：

form onsubmit=」return dovalidate()」

function dovalidate()

{

fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件

for(i=0;ifm.length;i++)

{

//檢測判斷條件，根據類型不同可以修改

if(fm[i].tagName.toUpperCase()==」INPUT」 fm[i].type.toUpperCase()==」TEXT」 (fm[i].title!=」”))

if(fm[i].value=」/blog/=」”)//

{

str_warn1=fm[i].title+」不能為空!」;

alert(str_warn1);

fm[i].focus();

return false;

}

if(fm[i].id.toUpperCase()==」SZ」)//數字校驗

{

if(isNaN(fm[i].value))

{ str_warn2=fm[i].title+」格式不對」;

alert(str_warn2);

fm[i].focus();

return false;

}

}

}

return true;

}

如何寫高質量的JS，Html5前端代碼

首先，本人在前端開發方面有點心得，有什麼不對的地方希望給出建議讓我更好的進步

1.命名

在開發前必須有個命名規範來對代碼統一規範團隊代碼結構，使代碼可讀性提高

2.注釋

我相信每個人看別人代碼時看到密密麻麻的代碼結構，相信每個人都會很頭疼，即使想看也會看不下去，而且很耗時間，所以注釋就變得尤其得重要，注釋越清楚越詳細我相信代碼可維護性越高，而且更容易修改維護

3.變量

在js中變量無處不在，所以這麼聲明變量就變得尤其得重要，首先少使用全局變量，這樣會增加加載速度，從而導致項目用戶體驗不好

4.聲明變量如果不用 var 會導致變量成為全局變量。

5.函數

函數的參數數量

函數的參數不應該超過 3 個。如果函數的參數超過 3 個，應該將一些參數進行封裝。

6.函數參數傳遞

只傳函數需要的參數。如

// 不推薦

function greet(data){

console.log(‘Hello, I am ‘ + data.name);

}

// 推薦

function greet(name){

console.log(‘Hello, I am ‘ + name);

}

7.函數的功能

一個函數只做一件事。這有助於測試和代碼復用。

函數儘可能無副作用。無副作用指不修改傳入的參數和全局變量。

8.減少重複代碼

. 記得在某個文章中看到說，如果重複的代碼出現 3 次，就應該重構重複的代碼。

. 松耦合

. 一個函數只做一件事

. 緩存一些計算結果

9.避免全局變量

. 從分配置和離邏輯代碼

. 不要修改不屬於你的對象

. 不屬於你的對象包括

. 瀏覽器原生對象，如 Object，Array等

DOM，如 document

BOM，如 window

類庫對象

如果想拓展瀏覽器原生對象的功能，可以創建函數，函數中把瀏覽器原生對象傳入。如 Underscore.js 做 的那樣。

10.代碼風格的統一

11.儘可能的避免代碼重複

. 如何減少重複的代碼呢？

. 在JS中，可以將重複的代碼寫成一個方法，如果是可通用的，可以寫在獨立的JS文件中。

. 在CSS中，則需要藉助Sass，Less之類的預處理語言的Mixins的功能。將重複的部分寫成一個Mixins。

12.配置和邏輯分開

. JS中，對於整個站的通用配置，寫在config.js里。如果是某個js的配置，在文件的開頭，用defaultParam 對象來存放可變的配置，用const來定義不可變的配置

. CSS中，依舊要藉助預處理語言。對於整站的配置，定 義在_variables.scss里。對於某個具體CSS文件里，在文件開頭用變量來定義

13.減少代碼的副作用

1JS中，方法中的溝通盡量不要用全局變量；不要在Array之類的全局對象的原型鏈上添加方法；盡量不要定義全局的方法和變量：如果確實有很多變量，方法放在全局上，可以學習jQuery,將很多變量，方法放在一個全局對象上；自定義事件，事件的名稱也要有命名空間。

2CSS中，要做到無副作用，難度很大。對於簡單頁面，一個方法是，把頁面上的元素都分成一個個組件，寫樣式時，選擇器要用組件選擇器 當前元素選擇器。當組件變的複雜時，組件也會包含很多子組件。然後，選擇器就會越來越長。。。我的解決方案是用的BEM。

14.提高代碼的可讀性

. 變量，方法等的合理命名，通過名稱可以知道這個大概做什麼的。

. 如果則要加註釋來說明一下。對於不容理解的代碼加註釋

. 儘可能不用魔法數字

. 對於HTML，選擇合適標籤

15.一個方法只做一件事

一來提高代碼的復用性，二來讓調試也變的更容易，三來讓測試變的更容易

前端開發，如何寫出優秀js代碼

每位前端工程師都喜歡易理解、可擴展、易維護的代碼，如何寫出優秀的JavaScript代碼，也是每位前端工程師的功課。如何才能寫出優秀的JavaScript代碼呢？

1.寫代碼前一定要搞清楚你要解決的問題是什麼，你的方案是否能夠解決問題。

2.擁有良好的命名規範，注意變量名區分大小寫，允許包含字母、數字、美元符號（$）和下劃線，但第一個字符不允許是數字，不允許包含空格和其他標點符號。

3.多寫代碼注釋。編寫代碼時的注釋應當盡量全面一些，這便於自己再次瀏覽代碼時好理解。

4.能不使用with語句的時候盡量不要使用with語句，盡量少使用eval ,每次使用eval需要消耗大量時間。

擁有一手好代碼的前端開發者，更具有大神風範，所以好代碼不僅要精鍊，更要易讀。