JS学习小结-完成表单验证功能

最新推荐文章于 2023-11-14 20:16:03 发布

Erstsemester

最新推荐文章于 2023-11-14 20:16:03 发布

阅读量441

点赞数

分类专栏： JavaWeb 文章标签：学习 javascript 前端正则表达式开发语言

本文链接：https://blog.csdn.net/weixin_54818033/article/details/127760135

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

刚学完js核心语法以及常见事件,做一个表单验证功能检验一下

首先明确需求

1.用户名不为空,6-14位之间,只能由数字,字母,数字+字母组成

2.密码和密码确认一致

3.邮箱合法

4.统一失去焦点验证

5.错误信息在span标签中提示字体12号红色

6.文本框再次获得焦点后清空错误提示信息并清空文本框

7.表单所有信息均合法才能提交

分析

1.首先输入的信息都不能为空,邮箱和用户名的合法性用正则表达式验证.

2.两次输入密码的一致性只需要获取到两个文本框的内容进行比较.

3.验证每一项的合法性(要获得一个Boolean类型的结果),若不合法,用span标签进行提示

4.将每一项的验证结果相与,都合法则验证成功

需要用到的基础知识

背景知识:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

1.熟悉js定义函数的语法以及常见的函数

2.给每个input标签设置id通过document.getElementById("id")获得节点对象通过节点对象.value获得输入的内容

3.熟悉onclick,onfocus,onload三个事件句柄

4.使用标签的innerText属性设置标签元素内部的内容

5.需要掌握在js中如何创建正则表达式对象并通过test()函数验证

5.需要掌握给标签注册事件,给事件注册函数的方法.

这里介绍使用js代码实现的方法(在标签外):利用load事件,我们可以将js代码块放在想放的位置,

获得节点对象,通过节点对象的属性注册函数.

代码

上述疏漏之处,在注释中都有体现

<html>
    <head>
        <!-- 需求 -->
        <!-- 1.用户名不为空,6-14位之间,只能由数字,字母或数字+字母组成
             2.密码和密码确认一致
             3.邮箱合法
             4.统一失去焦点验证
             5.错误信息在span标签中提示 字体12号 红色
             6.文本框再次获得焦点后清空错误提示信息并清空文本框
             7.表单所有信息均合法才能提交
               -->
    </head>
    <body>
         <!-- javascript: void(0) 作用是防止界面跳转 便于观察结果 密码框实用文本框也是为了方便观察 -->
        <form action=javascript: void(0) >
           用户名<br> <input type="text" id="username" style="width: 200px;"> <span style="color: red;"  font-size="12" id="span1"></span><br>
           密码<br> <input type="text" id="password1" style="width: 200px;"><span style="color: red;"   font-size="12" id="span2"></span><br>
           再次输入密码<br><input type="text" id="password2" style="width: 200px;"><span style="color: red;" font-size="12" id="span3"></span><br>
           邮箱 <br><input type="text" id="emil" style="width: 200px;"><span style="color: red;" font-size="12" id="span4"></span><br>
           <input type="submit" value="提交信息" id="submit">
           <input type="reset" value="重置">
        </form>
        <script>
            window.onload=function(){
                //给click事件注册函数
                document.getElementById("submit").onclick=function(){
                    //通过id获取节点对象
                       var username=document.getElementById("username")
                       var password1=document.getElementById("password1")
                       var password2=document.getElementById("password2")
                       var emil=document.getElementById("emil")
                       var span1=document.getElementById("span1")
                       var span2=document.getElementById("span2")
                       var span3=document.getElementById("span3")
                       var span4=document.getElementById("span4")
                       //创建正则表达式对象
                       var usernameRE=/^[!-~]{6,14}$/
                       var emilRE=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                       //进行验证
                       var ok1=(usernameRE.test(username.value))&&(username.value.trim()) //非空且格式正确
                       var ok2=(password1.value==password2.value)&&(password1.value.trim())//非空且格式正确
                       var ok3=emilRE.test(emil.value)&&(emil.value.trim())//非空且格式正确
                       if(!ok1){
                        //利用span标签的innerText属性设置提示信息
                        span1.innerText="用户名不合法"
                       }
                       if(!ok2){
                        if(!(password1.value.trim())&&!(password2.value.trim())){
                            span2.innerText="请输入密码"
                            
                        }else{
                            span2.innerText="密码输入不一致"
                        } 
                       }
                       if(!ok3){
                        span4.innerText="邮箱不合法"
                       }
                       if(ok1&&ok2&&ok3){
                        alert("验证成功")
                       }
                       username.onfocus=function(){
                        span1.innerText=""
                       }
                       password1.onfocus=function(){
                        span2.innerText="" 
                       }
                       emil.onfocus=function(){
                        span4.innerText=""
                       }
                    
                }
            }
        </script>

    </body>
</html>

以上内容若有错误,感谢指正!