一，效果图。

二，代码。

<!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. vue2.0 新手教程（一）

    想想自己写vue的项目也写了一年了,从vue1.0到2.0,走过不少路,填过不少坑, 下面记录一下新手从0到1的过程,本文“应该”会持续更新 首先安装vue的运行环境node 1.下载Nodejs并安 ...

  2. git使用方法----如何利用git管理代码？如何使用git将代码传到github中去

    ##  在文件夹中打开 git here; 1.git init ===初始化一个仓库(这个仓库会存放,git对我们代码进行备份的文件)2.配置个人信息 -- --在git中设置当前使用的用户是==( ...

  3. vlookup函数基本使用--如何将两个Excel表中的数据匹配；excel表中vlookup函数使用方法将一表引到另一表

    vlookup函数基本使用--如何将两个Excel表中的数据匹配:excel表中vlookup函数使用方法将一表引到另一表 一.将几个学生的籍贯匹配出来‘ 二.使用查找与引用函数 vlookup 三. ...

  4. .NET Core部署中你不了解的框架依赖与独立部署

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9703460.html NET Core项目发布的时候你有没有注意到这两个选项呢?有没有纠结过框架依赖与独 ...

  5. jsp fmt页面显示value does not support runtime expressions

    最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...

  6. java中Char到底是什么格式的编码

    文本处理中经常有这样的逻辑: String s = new String(bts, "UTF-8"); 看String源代码,里面是一个char[],将bts按照某种编码方式,变成 ...

  7. SpringBoot学习(三)-->Spring的Java配置方式之读取外部的资源配置文件并配置数据库连接池

    三.读取外部的资源配置文件并配置数据库连接池 1.读取外部的资源配置文件 通过@PropertySource可以指定读取的配置文件,通过@Value注解获取值,具体用法: @Configuration ...

  8. YARN集群的mapreduce测试（三）

    将user表.group表.order表关:(类似于多表关联查询) 测试准备: 首先同步时间,然后 开启hdfs集群,开启yarn集群:在本地"/home/hadoop/test/" ...

  9. MySQL行转列

    IF(expr1,expr2,expr3) 如果 expr1 是TRUE (expr1 <> 0 and expr1 <> NULL),则 IF()的返回值为expr2; 否则 ...

  10. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...