原生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>


相关文章
|
4天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
10 2
|
4天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
10 1
|
4天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5天前
|
监控 JavaScript 前端开发
超越原生:探索Node.js中最佳文件系统三方库
超越原生:探索Node.js中最佳文件系统三方库
|
5天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
9 2
|
6天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
11 2
|
6天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
11 0
|
JavaScript 前端开发 数据安全/隐私保护
通用表单验证函数 - FormCheck JavaScript Function
以前在开发项目的时候,在没使用EXTJS之前,写了这个通用的表单验证函数。 在实际开发过程中,使用非常简单,确实大幅提高了开发效率 现在虽然用不到了,但扔了感觉可惜,留在这里当个纪念吧!   通用表单验证函数使用说明     Author : netwild   最后更新日期:2009-07-02     一、函数功能     在编写WEB应用时,经常需要对各种表单进行输入验证,为了节省开发时间,增加开发效率,编写统一验证函数。
912 0
|
2天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
4天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会