html day2 js

使用JS完成简单的数据校验

需求分析

使用JS完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况

技术分析

JavaScript概述

什么是javascript: JavaScript一种直译式脚本语言，

什么是脚本语言?

java源代码 —-> 编译成.class文件 —–> java虚拟机中才能执行
脚本语言: 源码 ——– > 解释执行

js由我们的浏览器来解释执行

HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的

JS的组成:

ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法:

变量弱类型: var i = true

区分大小写

语句结束之后的分号 ,可以有,也可以没有

写在script标签

JS的数据类型:

基本类型
- string
- number
- boolean
- undefine
- null
引用类型
- 对象, 内置对象
类型转换
- js内部自动转换

JS的运算符和语句:

运算符和java 一样
- ”===” 全等号: 值和类型都必须相等
- == 值相等就可以了
语句和java 一样

JS的输出

alert() 直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML: 向页面输出
获取页面元素: document.getElementById(“id的名称”);

JS声明变量:

   var 变量的名称 = 变量的值

JS声明函数:

   var 函数的名称 = function(){ 

   }

   function 函数的名称(){

   }

JS的开发步骤

1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作

步骤分析:

代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /*
                1. 确认事件: 表单提交事件 onsubmit事件 
                2. 事件所要触发的函数: checkForm
                3. 函数中要干点事情
                    1. 校验用户名, 用户不能为空, 长度不能小于6位
                        1.获取到用户输入的值
            */
            function checkForm(){
                //获取用户名输入项
                var inputObj = document.getElementById("username");
                //获取输入项的值
                var uValue = inputObj.value;
//              alert(uValue);
                //用户名长度不能6位 ""
                if(uValue.length < 6 ){
                    alert("对不起,您的长度太短!");
                    return false;   
                }
                //密码长度大于6 和确认必须一致

                //获取密码框输入的值
                var input_password = document.getElementById("password");
                var uPass = input_password.value;

                if(uPass.length < 6){
                    alert("对不起,您还是太短啦!");
                    return false;
                }

                //获取确认密码框的值
                var input_repassword = document.getElementById("repassword");
                var uRePass = input_repassword.value;
                if(uPass != uRePass){
                    alert("对不起,两次密码不一致!");
                    return false;
                }

                //校验手机号
                var input_mobile = document.getElementById("mobile");
                var uMobile = input_mobile.value;
                //
                if(!/^[1][3578][0-9]{9}$/.test(uMobile)){

                    alert("对不起,您的手机号无法识别!");

                    return false;
                }

                //校验邮箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
                var inputEmail = document.getElementById("email");
                var uEmail = inputEmail.value;

                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
                    alert("对不起,邮箱不合法");
                    return false;
                }           
                return true;
            }   
        </script>
    </head>
    <body>
        <form action="JS开发步骤.html" onsubmit="return checkForm()">
            <div>用户名:<input id="username" type="text"  /></div>
            <div>密码:<input id="password" type="password"  /></div>
            <div>确认密码:<input id="repassword" type="password"  /></div>
            <div>手机号码:<input id="mobile"  type="number"  /></div>
            <div>邮箱:<input id="email" type="text"  /></div>
            <div><input type="submit" value="注册"  /></div>
        </form>
    </body>
</html>