Javascript知识【JS方法和事件&正则&JS注册案例】

💂 个人主页: 爱吃豆的土豆
🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🏆人必有所执，方能有所成！

🐋希望大家多多支持😘一起进步呀！

1，JS基础语法

1.1：JS方法/函数定义【重点】

1.2：JS常见操作【重点】

1，JS基础语法

1.1：JS方法/函数定义【重点】

是一定有返回值的，如果我们不指定返回的数据则会直接返回undefined

<script>
    //定义函数：展示“你好”
    function hello(){
        alert("你好");
    }

    //var r = hello();
    //alert(r);//undefined

    //定义函数：存入整数a、b ,计算a+b的和返回
    function getSum(a,b){
        return a+b;
    }

    var r2 = getSum(1,2);
    alert(r2);
script>

<script>
    function getSum(a,b,c) {
        for (var i = 0; i <arguments.length ; i++) {
            alert(arguments[i]);
        }
    }
    getSum(10,20,30,40);
script>

内置数组：

小结：

同名方法之间，存在的是覆盖关系。新内容覆盖旧内容。调用方法时，执行的是最下面的新定义。

arguments内置对象（数组），保存了传入进来的所有参数。

1.2：JS常见操作【重点】

1.2.1：事件

通常鼠标或热键的动作我们称之为事件（Event）

事件包括：点击，表单提交，值发生改变，鼠标移入，鼠标移出等等

通过JS事件，我们可以完成页面的指定特效

onclick：点击事件（鼠标点击、键盘点击、触屏点击）


<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        //若想要JS事件发生作用： JS事件四要素：
        /*
            警察抓小偷：
            事件：（事件源产生的动作）小偷偷东西
            事件源：（产生事件的元素）小偷
            监听器：（处理事件的功能）警察
            注册监听器：（让监听器和事件源的事件进行绑定）让警察时刻盯着小偷
            分析：
            事件：点击事件
            事件源：按钮
            监听器：run1方法
            注册监听器：run1方法时刻盯着 按钮的点击事件
         */
        //函数
        function run1() {
            alert("轻点、好痛");
        }
    script>
head>
<body>
    
    <input type="button" value="点我啊" onclick="run1()"/>
body>

绑定多个函数：

格式：事件="函数1();函数2()"

事件="函数1(),函数2()"


<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        //函数
        function run1() {
            alert("轻点轻点");
        }
        function run2() {
            alert("疼疼疼疼疼");
        }
    script>
head>
<body>
    
    <input type="button" value="点我啊" onclick="run1();run2()"/>
body>

表单提交事件onsubmit：这是一个提交事件，当表单提交的时候，会触发这个事件

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function check() {
            alert("校验了");
            return false;
        }
    script>
head>
<body>

    <form method="get" onsubmit="return check()">
        用户名：<input type="text" name="username" id="username" value="小李"/><br/>
        密码：<input type="password" name="pwd" id="pwd" value="123"/><br/>
        <input type="submit" value="注册"/>
    form>
body>
html>

1.2.2：通过ID获取HTML元素

document.getElementByid("id值")

这是一个方法，可以通过该方法获取id为某个值的页面元素

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        //document对象：DOM对象
        //document.getElementById("id"); 若页面上该id不存在，返回为null
        //若存在返回 element元素对象--node节点
        //.value: 获取框体的value属性值
        function getInputValue() {
            var username = document.getElementById("username");
            alert(username.value);
        }

    script>
head>
<body>
    <input type="text" id="username" value="张三"/>
    <input type="button" value="点我获取输入框的值" onclick="getInputValue()"/>
body>
html>

1.3：JS正则使用

定义正则：

new RegExp("正则表达式");

直接量方式定义：

var 变量 = /^正则$/;

方法：

RegExp对象：

test("待校验字符串");

true:符合正则

false:出现了一个/多个不符合正则的字符

<script>
    //判断字符串是否为空格组成的字符串   \s*
    var reg = /^\s*$/;
    var str = " a ";
    alert(reg.test(str));
script>

2，案例：JS注册案例【重点】

需求：

表单提交时，满足两个条件：

1、不能为空（用户名、密码、确认密码）

2、必须相同（密码和确认密码）

分析：

关键点：

onsubmit事件：

进行正则不能为空的校验：

\s* 为空

获取元素的值

document.getElementById("id");

document.getElementById("id").value;

步骤：

一、为表单绑定onsubmit事件

二、进行校验表单函数的编写

1、获取用户名、密码、确认密码框体的值

2、先依次判断用户名、密码、确认密码的不能为空校验，如果有空，直接弹出错误信息，阻止表单提交

3、若都不为空，再进行密码和确认密码是否相等的判断，如果都不相等，直接弹出错误信息，阻止表单提交

4、若都不为空，密码和确认密码是相等的，正常提交表单

代码实现：

<script>
   var reg = /^\s*$/;
   //校验表单提交数据
   function checkFormData() {
      //1、获取用户名、密码、确认密码框体的值
      var usernameVal = document.getElementById("username").value;
      var pwdVal = document.getElementById("pwd").value;
      var repwdVal = document.getElementById("repwd").value;
      //2、先依次判断用户名、密码、确认密码的不能为空校验，如果有空，直接弹出错误信息，阻止表单提交
      if(reg.test(usernameVal)){
         alert("用户名不能为空");
         return false;
      }
      if(reg.test(pwdVal)){
         alert("密码不能为空");
         return false;
      }
      if(reg.test(repwdVal)){
         alert("确认密码不能为空");
         return false;
      }
      //3、若都不为空，再进行密码和确认密码是否相等的判断，如果都不相等，直接弹出错误信息，阻止表单提交
      if(pwdVal!=repwdVal){
         alert("密码和确认密码必须一致");
         return false;
      }
      //4、若都不为空，密码和确认密码是相等的，正常提交表单
      return true;
   }
script>

代码优化思路：（扩展）

<script>
   var reg = /^\s*$/;
   //校验表单提交数据
   function checkFormData() {
      //1、获取用户名、密码、确认密码框体的值
      var usernameVal = document.getElementById("username").value;
      var pwdVal = document.getElementById("pwd").value;
      var repwdVal = document.getElementById("repwd").value;
      //2、先依次判断用户名、密码、确认密码的不能为空校验，如果有空，直接弹出错误信息，阻止表单提交
      var f1 = checkIsNotNull(usernameVal,"用户名");
      if(!f1){
         return f1;
      }
      var f2 = checkIsNotNull(pwdVal,"密码");
      if(!f2){
         return f2;
      }
      var f3 = checkIsNotNull(repwdVal,"确认密码");
      if(!f3){
         return f3;
      }
      //3、若都不为空，再进行密码和确认密码是否相等的判断，如果都不相等，直接弹出错误信息，阻止表单提交
      if(pwdVal!=repwdVal){
         alert("密码和确认密码必须一致");
         return false;
      }
      //4、若都不为空，密码和确认密码是相等的，正常提交表单
      return true;
   }

   //是否不为空。   为空false    不为空true
   function checkIsNotNull(val,str) {
      if(reg.test(val)){
         alert(str+"不能为空");
         return false;
      }
      return true;
   }
script>

相关阅读:
shell脚本语句控制命令（exit、break、continue）
Python: 列表、数组及迭代器切片的区别及联系
 yarn 报错文件名、目录名或卷标语法不正确 nvm
风车IM即时通讯系统APP源码DJ2403版完整苹果安卓教程
 整合 Windows 365，Win 11 实现双系统模式
 递归实现指数型枚举
 L1-055 谁是赢家-java
e2studio瑞萨笔记——ADC单次扫描多渠道
 专利终止怎么恢复？
Mybatis懒加载
原文地址：https://blog.csdn.net/m0_64550837/article/details/126185075