JavaScript登录验证基础教程

本文实例为大家分享了射流研究…登录验证的具体代码，供大家参考，具体内容如下

1.script/script的三种用法：

1.放在身体中

2.放在头中

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题欢迎你，请先登陆！/title脚本类型=' text/JavaScript ' src=' http :/static/JSP/LX。js/'脚本脚本类型='text/javascript'alert('这是爪哇岛描述语言代码)/脚本/头dyp id=' demo ' www/PS脚本文档。getelementbyid(' demo ').innerHTML=Date()/script div id=' container ' style=' width : 400 px ' align=' center ' div id=' header ' style=' background-color :海蓝宝石h2对齐=“中心”登陆/H2/div div id=' content '表单p align=' center '账号：输入id='uname '类型='tex '名称=“用户”占位符='请输入用户名/p p对齐="中心"密码：输入id='upass '类型='密码'名称=' PSW '/p div id=' error _ box ' br/div br按钮onclick='fnLogin()'登陆/button nbspnbspnbsp输入类型='按钮'名称='regist '值='注册/form /div div style='底色-颜色：海蓝宝石我版权信息@/i /div/div/body/html 3 .放在外部射流研究…文件中

document.getElementById('demo ').innerHTML=日期()

运行截图：

三种输出数据的方式：

1.使用document.write()方法将内容写到超文本标记语言文档中。

2.使用window.alert()弹出警告框。

3.使用innerHTML写入到超文本标记语言元素。

1).使用' id '属性来标识超文本标记语言元素。

2).使用document.getElementById(id)方法访问超文本标记语言元素。

3).用innerHTML来获取或插入元素内容。

代码如下

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题欢迎你，请先登陆！/title脚本类型=' text/JavaScript ' src=' http :/static/JSP/LX。js/'脚本脚本类型='text/javascript'alert('这是爪哇岛描述语言代码)/脚本/头dyp id=' demo ' www/PS脚本文档。getelementbyid(' demo ').innerHTML=Date()/脚本按钮类型=' button ' onclick=window。警报('数字')按/按钮/正文/html运行截图：

3.登录页面准备：

1.增加错误提示框。

2.写好HTML CSS文件。

3.设置每个输入元素的编号

4.定义Java脚本语言函数。

1.验证用户名6-20位

2.验证密码6-20位

5.onclick调用这个函数。

超文本标记语言代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题欢迎你，请先登陆！/title脚本类型=' text/JavaScript ' src=' http :/static/JSP/LX。js '/脚本链接rel='样式表type='text/css' href='./static/CSS/LX。CSS ' rel='外部no follow '/headdydiv class=' div ' id=' container ' div id=' header ' H2 class=' h '登陆/H2/div div id=' content ' p class=' p '账号：输入id='uname '类型=“文本”占位符='请输入用户名/p p class='p '密码：输入id='upass '类型=' password '/p div id=' error _ box ' br/div按钮onclick='fnLogin()'登陆/button nbspnbspnbsp输入类型='按钮'名称='regist '值='注册第一部分版权信息@/i /div/div/body/htmljs文件代码如下：

函数fnlog in(){ var ooname=document。getelementbyid(' uname ')var oUpass=document。getelementbyid(' upass ')var oeror=document。getelementbyid(' error _ box ')if(ooname。价值。长度20 | | ooname。价值。长度6){ oer。innerhtml='请输入6-20位字符} if(oupass。价值。长度20 | | oupass。价值。长度6){ oer。innerhtml='请输入6-20位字符}}CSS代码如下：div {边框： 5px实心# cccccc宽度： 400像素；文本对齐：中心；}.p{ font-family:华文楷体；}.h{ font-family:华文楷体；}运行截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。