本文目录一览：

• 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培训官网。