JS验证form表单

 
这节课做一个实际的，项目里会遇到的东西，例如登录页面，我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等，它都会做一个前端验证，比如验证码，是6位有效数字组成，那么用户输入了汉字、字母、下划线、特殊符号等，我们就可以直接给他一个错误提示，表单也就停止提交，格式必须正确才能提交，做一个判断限制，让别人的操作跟着我们走，而且还能增强安全性！同学千万不要认为这种判断没用，你想想，如果用户发送手机短信验证，他的手机号格式输入错了，但是自己没发现，并且他的这个格式，我们是可以判断出的，即：手机号都是11位吧，加入他输入了12为，10位呢，自己却没有发现，那他眼睛也不好或者其他原因，那不是会责怪我们写的程序有问题，短信不给他发送过去吗。
总之，简单的说，前端验证是需要的，那么这节课，我们就演示一个登录页面的表单验证，并且，用正则表达式！
html和css样式，老师就写简单点，同学能看得懂就行，重点是JS这一块哈！来，看代码：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>JS验证form表单，使用正则表达式</title>

</head>

<body>

    <h3>js验证表单</h3>

    <form action="#" method="post">

        <p>

            用户名： <input type="text"/>

        </p>

        <p>

            <!--letter-spacing 给它添加间距，这里用的是em单位 它比px大-->

            <span style="letter-spacing: 1em;">密</span>码： <input type="password"/>

        </p>

        <p>

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

        </p>

    </form>

</body>

</html>
 
那么这样，一个简单静态表单出来了，我们点击提交，浏览器后面就会出现一个‘#’，代表已经成功提交了，无数据，或者乱填都可以提交，所以下面，看全面的代码：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>JS验证form表单，使用正则表达式</title>

</head>

<body>

    <h3>js验证表单</h3>

<!-- form表单里加了一个onsubmit事件，当点击提交按钮就触发这个事件 -->

    <form action="#" method="post" onsubmit="return myform()">

        <p>

            用户名： <input type="text"/>

            <!--格式错误，用span做提示-->

            <span style="color:red;font-size: 12px;display: none;" class="tishi">

                必须两位字符及以上

            </span>

        </p>

        <p>

            <!--letter-spacing 给它添加间距，这里用的是em单位 它比px大-->

            <span style="letter-spacing: 1em;">密</span>码： <input type="password"/>

            <!--格式错误，用span做提示-->

            <span style="color:red;font-size: 12px;display: none;" class="tishi">

                密码只能由6-30位数字和字母组成

            </span>

        </p>

        <p>

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

        </p>

    </form>

<script>

    //forms 是找到当前页面所有form表单，而数组下标[0] 是找到第一个form

    var form = document.forms[0];

    //表单获取到了，我们先用正则来写格式规范

    //var是关键字，用来声明变量的

    var yonghu = /^[A-Za-z0-9_\-\-\u4e00-\u9fa5]{2,}$/;

    //yonghu，它的正则表达意思是，必须是数字或者大小写26位字母，或者中文，后面一串就是支持汉字的意思，花括号里的2,是指必须两位及以上字符

    var mima = /^[0-9a-zA-Z]{6,30}$/;

    //密码，这里面很简单，只能是数字或者26位大小写字母，花括号里的意思是字符长度为最小6位，最大30位

    //我们用 elements来获取form表单下的input  select  textarea这一类，属于form表单的元素

    function yanzheng(){

        //先隐藏它，这样它显示了之后，输入正确再次点击，即可隐藏

        document.getElementsByClassName('tishi')[0].style.display="none";

        document.getElementsByClassName('tishi')[1].style.display="none";

        //正则判断form下第一个input，如果错误返回一个假，并给出提示，

        if(!yonghu.test(form.elements[0].value)){

            //出现提示！

            document.getElementsByClassName('tishi')[0].style.display="inline";

            return false;

        }else if(!mima.test(form.elements[1].value)){

            //出现提示！

            document.getElementsByClassName('tishi')[1].style.display="inline";

            return false;

        }

        //如果上面的判断为假，则返回false，上面的判断都正确，就直接跳过if里的代码，执行下面的 true

        return true;

    }

    function myform(){

        //判断 yanzheng函数，它如果返回过来的是true，我们就判断，是真就返回真

        if(yanzheng())

            return true;

        //如果yanzheng函数返回的是false则不会执行上面的 true，就会执行线面的false，表单就无法提交

        return false;

    }

</script>

</body>

</html>
 
这里面要注意的是，forms是找到表单，[0]这类是数组格式，里面的0是它的下标，找到第一个，1则是第二个，以此类推。getElementsByClassName是找到class类，之前的getElementsByID就是找到id，而这里找到的class类，因为页面里class类可能是多个，所以它也是一个数组哦。
 
这样写代码，会多太杂，我们有很多方法来减少代码，下节课我们学习‘参数’，参数特别重要，以后的工作的项目中几乎都有参数的哟！
 

第十七篇 JS验证form表单的更多相关文章

  1. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  2. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  3. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  4. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  5. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  6. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  7. jQuery.Validate.js验证大表单的优化

    最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会 ...

  8. Js 提交 form 表单

    本文主要讲如何使用Js提交表单,在使用ajax进行异步验证的多数情况下,需要使用Js提交表单,以下简单说几种提交表单的方式: 1.document.getElementById("formI ...

  9. 参数传递的四种形式----- URL，超链接，js，form表单

    什么时候用GET,  查,删, 什么时候用POST,增,改  (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...

随机推荐

  1. find 命令详细解释

    命令格式:find pathname -options [-print -exec -ok ...] 命令参数: pathname: find命令所查找的目录路径.例如用.来表示当前目录,用/来表示系 ...

  2. Vue-2：官方教程学习

    1,先把下面这些内容都按照官方教程敲一遍,打好基础,类似于“前戏”,其作用我想爸爸就不必多说了吧(づ｡◕‿‿◕｡)づ. https://cn.vuejs.org/v2/guide/ 同时可以配合配套视 ...

  3. 设计模式--观察者模式--python

    观察者模式: 对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 主要解决: 当一个抽象模型有两个方面, 其中一个方面依赖于另一方面.将这二者封装在 ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_1_02技术选型

    笔记 2.技术选型和学后水平     简介:课程所需基础和技术选型讲解,学完课程可以到达怎样的程度,          1.IDEA JDK8 Maven SpringBoot基础 Linux 2.理 ...

  5. k8s开启cadvisor http 服务

    k8s开启cadvisor http 服务 cadvisor介绍: Google的 cAdvisor 是另一个知名的开源容器监控工具. 只需在宿主机上部署cAdvisor容器,用户就可通过Web界面或 ...

  6. mysql 索引失效的几种情况+

  7. 微信小程序省市区联动，自定义地区字典

    最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...

  8. QT5中编译存在的几个问题（LNK2019，构造函数不能有返回类型）

    1. 自己构造新类,注意必须在头文件最后加上分号 写个c++类报“构造函数不能有返回类型”, 谷歌一下,才找到原因: 原来是我定义的类后面没有用“:”结尾,构造函数默认把整个类作为返回值了 2. 新建 ...

  9. C学习笔记-makefile

    除非最简单的项目,任何一个商业项目都会包含多个源代码,而且在编译的时候会有很长很复杂的指令,为了编译的简单可行,makefile由此而生,在编译时候直接输入make便会按照makefile里面的规则编 ...

  10. C学习笔记-枚举

    枚举定义 可以使用枚举(enumerated type)声明代表整数常量的符号名称,关键字enum创建一个新的枚举类型 实际上,enum常量是int类型的 枚举的本质就是int型的常量 enum sp ...