博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 基础,登录前端验证
阅读量:4498 次
发布时间:2019-06-08

本文共 2104 字,大约阅读时间需要 7 分钟。

1.<script></script>的三种用法:

    1.放在<body>中

     2. 放在<head>中

     3.放在外部JS文件中

2.三种输出数据的方式:

1.使用 document.write() 方法将内容写到 HTML 文档中。

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

3.使用 innerHTML 写入到 HTML 元素。

a.使用 "id" 属性来标识 HTML 元素。

b.使用 document.getElementById(id) 方法访问 HTML 元素。

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

    
登录

放在外部JS文件中function Login() {            var oUname = document.getElementById("name")            var oError = document.getElementById("error_box")            var opassword = document.getElementById("password")         if(oUname.value.length<6||oUname.value.length>20){                oError.innerText="用户名需为6-20个字符";                return;            }            else if(opassword.value.length<6||opassword.value.length>20){                oError.innerText="密码需在6-20个字符内";                return;            }            else{                oError.innerHTML="";            }             }

 

3.登录页面准备:

    1.增加错误提示框。

    2.写好HTML+CSS文件。

    3.设置每个输入元素的id

4.定义JavaScript 函数。

    1.验证用户名6-20位

 

   

 

    2.

验证密码6-20位

 

 

5.onclick调用这个函数。

 

HTML文件

 

    
登录|哈哈书院

武林萌主|登录

姓名:
密码:
萌主
闲杂人等
记住密码

CSS

 

div{
width: 700px; margin:0 auto; text-align:center; background: aquamarine;}.box{
width:500px; height:250px; border-color:pink; border-width:1px; margin-top:100px;}.box2{
text-align: center; font-family: "华文新魏";}.dl{
clear: both; text-align: center; background-color:aquamarine; margin-bottom: 0; font-family: "华文新魏"; font-size: 20px; height: 45px; color: pink;}.input_box {
height: 175px; width: 700px; float: left; text-align: center; font-size: 29px; color: aquamarine; font-family: "华文彩云"; background: pink;}#login {
font-family: "华文新魏";}#error_box{
text-align: center; font-family: "华文新魏";}

 

 

 

转载于:https://www.cnblogs.com/00js/p/7744702.html

你可能感兴趣的文章
异常的基本概念
查看>>
iOS 离屏渲染学习笔记
查看>>
iOS Xib布局某些控件显示或隐藏<约束的修改>
查看>>
苹果端手机微信页面长按图片无法保存的解决方案
查看>>
球的移动(move)
查看>>
页面禁止双击选中
查看>>
打印流
查看>>
TCP/IP模型的一个简单解释
查看>>
解开最后期限的镣铐(转载)
查看>>
Kth Smallest Element in a BST
查看>>
ubuntu14.04利用aliyun安装docker
查看>>
iphone-命令行编译之--xcodebuild
查看>>
Plan : 破晓
查看>>
GNU make
查看>>
Visual Studio 2008 不能更改安装目录的原因
查看>>
threejs学习笔记04---相机动
查看>>
SAP Skill - How to search a field for which table it belongs
查看>>
parcel+vue入门
查看>>
基数排序
查看>>
Dell笔记本刷回低版本bios的方法
查看>>