原生JavaScript之dom添加表单验证

简介: 原生JavaScript之dom添加表单验证

方法


第一种,在form表单中加入onsubmit事件,进入事件后,可以通过dom.forms[父formname][子formname].value,然后测试这个别名是否为空,在这个判断语句中即可放入想要的表单验证


第二种,在input中加入required,这个是浏览器默认的校验,如果说input中加入required,则默认它生效.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form name="myform" onsubmit="return dianji()" method="post">
      name:<input type="text" name="fname">
      age:<input type="text" required />
    <input type="submit" value="Submit">
    </form>
    <script>
      function dianji() {
        const x = document.forms["myform"]["fname"].value;
        if (x == "") {
          alert("提交失败,请重新输入name")
          return false;
        }
      }
    </script>
  </body>
</html>


相关文章
|
18天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
20 1
|
25天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
10天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
12天前
|
移动开发 前端开发 JavaScript
|
14天前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
9 0
|
14天前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
10 0
|
17天前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
13 0
|
17天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
|
20天前
|
Web App开发 移动开发 JavaScript
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
探索 JavaScript 宇宙:DOM与BOM的星际邂逅
|
27天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
23 0