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需要消耗大量時間。

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