<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function check() {

            //教研名字

            var firstnamev = document.getElementById('firstname').value;

            if (firstnamev == '') {

                alert('名字不能为空');

                return false;

            } else {

                for (var i = 0; i < firstnamev.length; i++) {

                    var c = firstnamev[i];

                    if (c >= 0) {

                        alert('名字不能包含数字');

                        return false;

                    }

                }

            }

            //教研姓氏

            var lastnamev = document.getElementById('lastname').value;

            if (lastnamev == '') {

                alert('姓氏不能为空');

                return false;

            } else {

                for (var j = 0; j < lastnamev.length; j++) {

                    var cl = lastnamev[j];

                    if (cl >= 0) {

                        alert('姓氏不能包含数字');

                        return false;

                    }

                }

            }

            //校验邮箱

            var emailv = document.getElementById('email').value;

            if (emailv == '') {

                alert('邮箱不能为空！');

                return false;

            } else {

                var index1 = emailv.indexOf('@');//字符串中包含“@”

                var index2 = emailv.indexOf('.');//字符串中包含“.”

                if (index1 == -1 || index2 == -1) {//@,.不存在

                    alert('邮箱地址不合法！');

                    return false;

                } else if (index1 >= index2) {//@在.的后面,索引大于.

                    alert('邮箱地址不合法！');

                    return false;

                }

            }

            //校验密码

            var p = document.getElementById('password').value;

            if (p == '') {

                alert('密码不能为空!');

                return false

            } else if (p.length <= 3) {

                alert('密码长度小于6!');

                return false;

            }

            var chekpsdv = document.getElementById('check_password').value;

            if (chekpsdv == '') {

                alert('请再次输入密码');

                return false;

            }

            else if (chekpsdv != p) {

                alert('两次输入密码不一致');

                return false;

            }

        }

    </script>

</head>

<body>

<form action="do.html" onsubmit="return check();">

    名字：<input type="text" id="firstname"><br>

    姓氏：<input type="text" id="lastname"><br>

    邮箱：<input type="text" name="" id="email"><br>

    密码：<input type="txt" name="" id="password"><br>

    再次输入密码：<input type="txt" name="" id="check_password"><br>

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

</form>

</body>

</html>

表单校验demo的更多相关文章

  1. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  2. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  3. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  4. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  5. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

  6. 表单校验插件（bootstrap-validator）

    表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...

  7. 应用二：Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  8. angularJs表单校验（超级详细！！！）

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  9. @valid表单验证demo

    springMVC 表单验证demo  视图层使用的是jsp

随机推荐

  1. （转）关于eclipse的TestNG的插件安装方法

    背景:最近在学习spring 4.x时候,用到了testNG的测试方法,发现需要在eclipse安装testNG插件才能够正常进行单元测试. 1 插件安装 今天在配置eclipse+selenium+ ...

  2. Objective-C 使用核心动画CAAnimation实现动画

    先来看看效果吧 整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种 CABasicAnimation //经典动画 CAKeyframeAnimation //关键帧动画 C ...

  3. 阿里聚安全移动安全专家分享：APP渠道推广作弊攻防那些事儿

    移动互联网高速发展,要保持APP持续并且高速增长所需的成本也越来越高.美团网CEO在今年的一次公开会议上讲到:"2017年对移动互联网公司来说是非常恐的.".主要表现在三个方面,手 ...

  4. GateSvr的设计2

    我们的目标是:1.业务Server集群部署,从网关发来的请求处理,程序自动找一台空闲的业务Server来处理这个请求,并将结果异步分发到服务网关,从而Push给客户端:2.一套业务Server挂了不会 ...

  5. ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据

    摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...

  6. 如何在github制作一个网页

    1.首先得先注册一个github账号,官网:https://github.com/ 2.注册完,登录账号进入首页,点右上角的 ‘+’ 创建新的仓库 3. 点击setting,选择一个主题, 4. 选完 ...

  7. 表达式求值（栈方法/C++语言描述）（二）

    上篇中完成了对表达式求值的整体过程,接下来看看如何处理不同类型的token. 对运算数的处理比较简单,它直接调用函数strtod(),将字符串中的运算数转换为浮点类型并将它压入运算数栈中: void ...

  8. salesforce零基础学习（七十七）队列的实现以及应用

    队列和栈简单的区别为栈是后进先出,队列是先进先出.队列也是特殊的线性表,所以队列也分为顺序存储结构和链式存储结构.本篇主要描述顺序存储结构. 我们先假定一个队列里有5个元素,当我们添加新元素时,添加到 ...

  9. Lettuce_webdriver 自动化测试

    这篇文章主要讲解以下几点: 1. Lettuce_webdriver环境搭建 2. lettuce_webdriver自动化实例讲解 一. lettuce_webdriver环境搭建 搭建lettuc ...

  10. python基础===Python 代码优化常见技巧

    Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 8 ...