一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JavaScript 表单验证</title>

    <script>

    function validateForm() {

        var x = document.forms["myForm"]["fname"].value;

        if (x == null || x == "") {

            alert("姓必须填写");

            return false;

        }

    }

    </script>

    <script>

    function validateForm() {

        var x = document.forms["myForm"]["email"].value;

        var atpos = x.indexOf("@");

        var dotpos = x.lastIndexOf(".");

        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {

            alert("Not a valid e-mail address");

            return false;

        }

    }

    </script>

</head>

<body>

    <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">

        姓:

        <input type="text" name="fname">

        <input type="submit" value="提交">

    </form>

    <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">

        Email:

        <input type="text" name="email">

        <input type="submit" value="Submit">

    </form>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-JavaScript-JavaScript表单验证的更多相关文章

  1. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  3. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  6. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. JavaScript自学笔记（1）---表单验证，let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  8. JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  9. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

  10. JavaScript之表单验证讲解

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...

随机推荐

  1. IndexedDB 简单封装

    IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂. 当然浏览器数据存储 还有Lo ...

  2. SpringBoot配置Cors解决跨域请求问题

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  3. clion调试postgresql

    clion怎么调试postgresql呢? clion使用cmake去编译项目的,但是大家编译postgresql用的是make.虽然项目中也有CMakeLists.txt文件,但是cmake会报错, ...

  4. Web Service 部分内容简述（1）

    1.什么是Web服务(web service) Wb服务是一种可以用来解决跨网络应用集成问题的开发模式,是基于网络的.分布式的模块化组件,它执行特定的任务遵守具体的技术规范,这些规范使得Web Ser ...

  5. MaskRCNN-Keypoints

    这个月先写一篇吧,后面要复习数学考试了,可能到时候就忘了.今天写一个比较有意思的东西,关于人体的分割与姿态估计.如下图所示: 图片选自mask rcnn的论文,这里由于时间的关系,就不多叙述技术细节了 ...

  6. [转]angular使用Md5加密

    本文转自:https://www.cnblogs.com/waitingbar/p/7527928.html 一.现象 用户登录时需要记住密码的功能,在前端需要对密码进行加密处理,增加安全性 二解决 ...

  7. [C#] C# 知识回顾 - Lambda

    C# 知识回顾 - Lambda 序 它是第十一个希腊字母,一个拥有失意.无奈.孤独.低调等含义的流行符号,也指示一款称为“半条命”的游戏. 不过,这次我所讲的是 C# 中的 Lambda. 目录 L ...

  8. oracle listener.ora文件配置

    # listener.ora Network Configuration File: /oracleDB/product//db_1/network/admin/listener.ora # Gene ...

  9. .NET Core 实践二：事件通知和异步处理

    首先让我们来先看一个例子: 这是一个简单的用户下单购买商品的业务模型,输入端是用户,相关物料有订单和货物,相关的内部服务有业务(订单).财务(支付).仓储(备货)和物流(运输). 从图中我们可以看到, ...

  10. Webapi创建和使用 以及填坑(一)

    Webapi创建和使用 前言:在开发的过程中接口的用途有很多,而且是非常必要.通过接口我们可以跨语言的进行开发web与app或者其他程序,比如http接口.api接口..Rpc接口.rmi.webse ...