本文目錄一覽：
- 1、項目前端js基礎代碼包括哪些方面的東西?一般都怎樣寫?
- 2、前端JS 怎麼實現用戶登陸之後點各個頁面都不用再登陸？
- 3、求前端驗證js代碼
- 4、Web前端工程師要掌握的JavaScript代碼片段(一)
項目前端js基礎代碼包括哪些方面的東西?一般都怎樣寫?
我不知道我問題理解有沒有誤哈……
js可以對網頁的內容進行修改，例如增加和刪除：文字、圖片、表格、視頻、…… ……等一系列在html中的東西。
js可以進行計算，實現一些算法，例如找到搜索、數據計算、……
js也能做動畫，例如圖片的移動、放縮、旋轉（涉及css），但是很麻煩，不過好在網上有一些js的庫（就是別人寫好函數了，你調用），例如jQuery（本質也是js）。
其他的功能屬於不太直觀的了，先不詳述。寫法就是直接將書寫代碼，插入到html等網頁文件中，用戶的瀏覽器打開網頁後，就可以執行js代碼了。在項目中，一般把相關的功能或者常用的功能的代碼直接寫在一個文本文件里，然後後綴為 .js ，由網頁引用。好處是用戶第一次加載完網頁後，第二次不需要重新讀取js。
前端JS 怎麼實現用戶登陸之後點各個頁面都不用再登陸？
給你說個思路吧！
登錄成功之後，把登錄信息加密後保存在cookie裡面；
然後建一個js文件，在這個文件裡面做用戶是否已登錄的判斷！如果登錄了就直接顯示該頁面，如果沒登錄，就跳轉回登錄頁面！
這個js文件在登錄後才能看到的頁面都做引用；
求前端驗證js代碼
這是一般表單中會用到的 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;
}
Web前端工程師要掌握的JavaScript代碼片段(一)
今天小編要跟大家分享的文章是關於Web前端工程師要掌握的JavaScript代碼片段(一)。正在從事web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。
1、Anagramsofstring(帶有重複項)
使用遞歸。對於給定字符串中的每個字母，為字母創建字謎。使用map()將字母與每部分字謎組合，然後使用reduce()將所有字謎組合到一個數組中，最基本情況是字符串長度等於2或1。
constanagrams=str={
if(str.length[str];
returnstr.split(”).reduce((acc,letter,i)=
acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=
letter+val)),[]);
};
//anagrams(‘abc’)-[‘abc’,’acb’,’bac’,’bca’,’cab’,’cba’]
2、數組平均數
使用reduce()將每個值添加到累加器，初始值為0，總和除以數組長度。
constaverage=arr=arr.reduce((acc,val)=acc+val,0)/
arr.length;
//average([1,2,3])-2
3、大寫每個單詞的首字母
使用replace()匹配每個單詞的第一個字符，並使用toUpperCase()來將其大寫。
constcapitalizeEveryWord=str=str.replace(/\b[a-z]/g,char=
char.toUpperCase());
//capitalizeEveryWord(‘helloworld!’)-‘HelloWorld!’
4、首字母大寫
使用slice(0,1)和toUpperCase()大寫第一個字母，slice(1)獲取字符串的其餘部分。省略lowerRest參數以保持字符串的其餘部分不變，或將其設置為true以轉換為小寫。(注意：這和上一個示例不是同一件事情)
constcapitalize=(str,lowerRest=false)=
str.slice(0,1).toUpperCase()+(lowerRest?str.slice(1).toLowerCase():
str.slice(1));
//capitalize(‘myName’,true)-‘Myname’
5、檢查迴文
將字符串轉換為toLowerCase()，並使用replace()從中刪除非字母的字符。然後，將其轉換為tolowerCase()，將(”)拆分為單獨字符，reverse()，join(”)，與原始的非反轉字符串進行比較，然後將其轉換為tolowerCase()。
constpalindrome=str={
consts=str.toLowerCase().replace(/[\W_]/g,”);
returns===s.split(”).reverse().join(”);
}
//palindrome(‘tacocat’)-true
6、計數數組中值的出現次數
每次遇到數組中的特定值時，使用reduce()來遞增計數器。
constcountOccurrences=(arr,value)=arr.reduce((a,v)=v===
value?a+1:a+0,0);
//countOccurrences([1,1,2,1,2,3],1)-3
7、當前URL
使用window.location.href來獲取當前URL。
constcurrentUrl=_=window.location.href;
//currentUrl()-”
8、Curry
使用遞歸。如果提供的參數(args)數量足夠，則調用傳遞函數f，否則返回一個curried函數f。
constcurry=(fn,arity=fn.length,…args)=
arity
?fn(…args)
:curry.bind(null,fn,arity,…args);
//curry(Math.pow)(2)(10)-1024
//curry(Math.min,3)(10)(50)(2)-2
9、Deepflattenarray
使用遞歸，使用reduce()來獲取所有不是數組的元素，flatten每個元素都是數組。
constdeepFlatten=arr=
arr.reduce((a,v)=a.concat(Array.isArray(v)?deepFlatten(v):v),
[]);
//deepFlatten([1,[2],[[3],4],5])-[1,2,3,4,5]
10、數組之間的區別
從b創建一個Set，然後在a上使用Array.filter()，只保留b中不包含的值。
constdifference=(a,b)={consts=newSet(b);returna.filter(x
=!s.has(x));};
//difference([1,2,3],[1,2])-[3]
11、兩點之間的距離
使用Math.hypot()計算兩點之間的歐幾里德距離。
constdistance=(x0,y0,x1,y1)=Math.hypot(x1-x0,y1-y0);
//distance(1,1,2,3)-2.23606797749979
12、可以按數字整除
使用模運算符(%)來檢查餘數是否等於0。
constisDivisible=(dividend,divisor)=dividend%divisor===0;
//isDivisible(6,3)-true
13、轉義正則表達式
使用replace()來轉義特殊字符。
constescapeRegExp=str=str.replace(/[.*+?^${}()|[\]\\]/g,
‘\\$’);
//escapeRegExp(‘(test)’)-\\(test\\)
14、偶數或奇數
使用Math.abs()將邏輯擴展為負數，使用模(%)運算符進行檢查。如果數字是偶數，則返回true;如果數字是奇數，則返回false。
constisEven=num=num%2===0;
//isEven(3)-false
15、階乘
使用遞歸。如果n小於或等於1，則返回1。否則返回n和n-1的階乘的乘積。
constfactorial=n=n
//factorial(6)-720
16、斐波那契數組生成器
創建一個特定長度的空數組，初始化前兩個值(0和1)。使用Array.reduce()向數組中添加值，後面的一個數等於前面兩個數相加之和(前兩個除外)。
constfibonacci=n=
Array(n).fill(0).reduce((acc,val,i)=acc.concat(i1?acc[i-
1]+acc[i-2]:i),[]);
//fibonacci(5)-[0,1,1,2,3]
17、過濾數組中的非唯一值
將Array.filter()用於僅包含唯一值的數組。
constfilterNonUnique=arr=arr.filter(i=arr.indexOf(i)===
arr.lastIndexOf(i));
//filterNonUnique([1,2,2,3,4,4,5])-[1,3,5]
18、Flatten數組
使用reduce()來獲取數組中的所有元素，並使用concat()來使它們flatten。
constflatten=arr=arr.reduce((a,v)=a.concat(v),[]);
//flatten([1,[2],3,4])-[1,2,3,4]
19、從數組中獲取最大值
使用Math.max()與spread運算符(…)結合得到數組中的最大值。
constarrayMax=arr=Math.max(…arr);
//arrayMax([10,1,5])-10
20、從數組中獲取最小值
使用Math.min()與spread運算符(…)結合得到數組中的最小值。
constarrayMin=arr=Math.min(…arr);
//arrayMin([10,1,5])-1
21、獲取滾動位置
如果已定義，請使用pageXOffset和pageYOffset，否則使用scrollLeft和scrollTop，可以省略el來使用window的默認值。
constgetScrollPos=(el=window)=
({x:(el.pageXOffset!==undefined)?el.pageXOffset:el.scrollLeft,
y:(el.pageYOffset!==undefined)?el.pageYOffset:el.scrollTop});
//getScrollPos()-{x:0,y:200}
22、最大公約數(GCD)
使用遞歸。基本情況是當y等於0時。在這種情況下，返回x。否則，返回y的GCD和x/y的其餘部分。
constgcd=(x,y)=!y?x:gcd(y,x%y);
//gcd(8,36)-4
23、Headoflist
返回ARR[0]
consthead=arr=arr[0];
//head([1,2,3])-1
24、list初始化
返回arr.slice(0，-1)
constinitial=arr=arr.slice(0,-1);
//initial([1,2,3])-[1,2]
以上就是小編今天為大家分享的關於Web前端工程師要掌握的JavaScript代碼片段(一)的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識和想要了解後面的代碼片段的小夥伴，記得關注北大青鳥web培訓官網。
原創文章，作者：NTBZ，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/136827.html
微信掃一掃 
支付寶掃一掃 