首页 > 编程语言 >JavaScript DOM表单相关操作之表单验证

JavaScript DOM表单相关操作之表单验证

时间:2024-01-23 18:57:01浏览次数:22  
标签:JavaScript obj 验证 DOM 表单 var 长度 输入


在大部分的情况下我们希望用户输入的数据是我们理想中的格式,尤其是在用户注册上,一些重要的信息我们是不允许用户乱写的,如手机号,邮箱等。接下来一起看几种表单验证的方式:

1、验证长度

验证长度是比较简单的,input标签元素的maxlength属性可以设置可输入的最大长度

// 用maxlength属性验证
<form>
	姓名:<input type="text" maxlength="10">
</form>
// 需要注意的是这个属性不区分中英文

// 在失去焦点框时验证
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>验证字符串长度</h3>
    <input type="text" id="username"><br>
    <span id="message"></span>
</form>
</body>
<script>
    var obj = document.getElementById('username'); // 获取input对象
    obj.onblur = function (){  // 绑定失去焦点事件
        var inputValue = obj.value; // 获取表单输入的值
        var inputLength = inputValue.length;  // 获取表单输入值的长度
        if (inputLength > 5){  // 对长度进行判断
            var spanObj = document.getElementById('message');  // 获取span对象
            spanObj.innerHTML = '输入的长度不能大于5';  //写入提示信息
        }
    }
</script>
</html>

2、正则匹配验证

复杂一点的情况,例如网址等就需要正则表达式来匹配了,关于正则表达式后面会专门出一篇介绍,感兴趣的同学可以关注一下。

标签:JavaScript,obj,验证,DOM,表单,var,长度,输入
From: https://www.cnblogs.com/zhishunet/p/17983153

相关文章

  • Element Ui使用技巧——Form表单的校验规则rules详细说明
    ElementUi使用技巧——Form表单的校验规则rules详细说明:https://blog.csdn.net/weixin_46711427/article/details/117672462?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0-117672462-blog-124431947.235^v40^pc_relevant_rights_sort......
  • 写给不耐烦程序员的 JavaScript 指南(二)
    第四部分:原始值原文:exploringjs.com/impatient-js/pt_primitive-values.html译者:飞龙协议:CCBY-NC-SA4.0下一步:14非值undefined和null十四、非值的undefined和null原文:exploringjs.com/impatient-js/ch_undefined-null.html译者:飞龙协议:CCBY-NC-SA4.014......
  • 深入 JavaScript:理论和技术(上)
    第一部分:前言原文:exploringjs.com/deep-js/pt_frontmatter.html译者:飞龙协议:CCBY-NC-SA4.0下一步:1关于本书一、关于这本书原文:exploringjs.com/deep-js/ch_about-book.html译者:飞龙协议:CCBY-NC-SA4.01.1 这本书的主页在哪里?1.2 这本书包括什么?1.3 ......
  • 细说JavaScript事件处理(JavaScript事件处理详解)
    js语言的一个特色和就是它的动态性,即一时间驱动的方式对用户输入作出反应而不需要依赖服务器端程序。事件是指人机交互的结果,如鼠标移动、点击按钮、在表单中输入数据或载入新的Web洁面等。一、什么是事件事件是一些可以通过脚本响应的页面动作,当文档、浏览器、元素发生某些有趣......
  • JavaScript DOM表单相关操作之表单相关事件
    1、焦点事件焦点事件就是鼠标的光标事件,点到输入框中,叫做获得焦点事件,当鼠标离开这个输入框时叫做失去焦点事件。​<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title></head><body><form><h3>......
  • JavaScript DOM表单相关操作之获取表单数据的方式
    在与表单相关的操作中,我们用的最多的就是获取表单中的数据。想要获取指定输入框的数据,首先就需要获取到这个输入框对象。1、通过id属性获取表单数据​<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title></head......
  • 细说JavaScript事件处理(JavaScript事件处理详解)
    js语言的一个特色和就是它的动态性,即一时间驱动的方式对用户输入作出反应而不需要依赖服务器端程序。事件是指人机交互的结果,如鼠标移动、点击按钮、在表单中输入数据或载入新的Web洁面等。一、什么是事件事件是一些可以通过脚本响应的页面动作,当文档、浏览器、元素发生某些有......
  • 一文读懂JavaScript DOM节点操作(JavaScript DOM节点操作详解)
    一、什么是节点DOM模型是树状结构模型,二组成这棵树的就是一个个点,在网络术语中称之为节点。节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的,DOM节点也有其不同的类型。二、节点类型DOM节点分为5种类型:文档节点(就是整个HTML文档,也就是document对象)元素节点......
  • JavaScript DOM表单相关操作之表单相关事件
    1、焦点事件焦点事件就是鼠标的光标事件,点到输入框中,叫做获得焦点事件,当鼠标离开这个输入框时叫做失去焦点事件。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title></head><body><form><h3>输......
  • JavaScript DOM表单相关操作之获取表单数据的方式
    在与表单相关的操作中,我们用的最多的就是获取表单中的数据。想要获取指定输入框的数据,首先就需要获取到这个输入框对象。1、通过id属性获取表单数据<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title></head>......