一，效果图。

二，代码。

<!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. Kali学习笔记24：Nikto、Skipfish

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 实验环境: Kali机器IP:192.168.163. ...

  2. Kali学习笔记12：服务扫描

    关于什么是服务扫描不多介绍,通俗来看: 我已经扫描到目标机器某个端口开放,接下来我需要知道开放这个端口的是什么应用 情景: 我的Kali机器IP地址:192.168.22.130 我要扫描的Metas ...

  3. 提纲挈领webrtc音频处理算法之写在前面的话

    最近工作用到了webrtc,发现webrtc是个宝库,里面有很多东西值得好好研究. 搜了这方面不少资料,发现介绍使用webrtc的不少,但是针对里面一些算法研究的 不多.特别是能把算法说的简洁明了的更 ...

  4. Python中的注释和解注释

    注释 目标 注释的作用 单行注释(行注释) 多行注释(块注释) 01. 注释的作用 使用用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序的可读性 02. 单行注释(行注释) 以 # 开头,# ...

  5. JAVA中的Random()函数

    Java中存在着两种Random函数: 一.java.lang.Math.Random; 调用这个Math.Random()函数能够返回带正号的double值,该值大于等于0.0且小于1.0,即取值范 ...

  6. GitLab CI .NET 部署中的几个坑

    信息乱码 Msbuild编译失败 VS却编译成功 设置环境变量本地有用,但是runner跑起来就失败 powershell公共变量为空 命令执行失败,却集成成功,pass了 1.信息乱码 信息乱码是真 ...

  7. 微信小程序开发-第一弹

    前言:       本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步  注册        1.1 打开网址 https://mp.weixin.qq.com/  ...

  8. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  9. list源码4(参考STL源码--侯捷)：transfer、splice、merge、reverse、sort

    list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...

  10. Analyzing .net core application with SonarQube Scanner for MSBuild

    SonarQube是管理代码质量一个开放平台,省略安装过程,下面介绍下如何使用sonarqube去扫描c# 代码. 前提:下载SonarQube Scanner for MSBuild.https:/ ...