JavaScript 表单验证

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

实例：1.用户名的非空验证代码如下：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

    <style type="text/css">

    </style>

</head>

<body>

    <form action="aa.html" method="post">                  <!--<form> 中的两个必要属性：action,method-->

        用户名<input type="text" name="nn" id="nn" />

        <input type="submit" value="登陆" id="b1" onclick= "return yz()" />       <!--onclick属性添加点击事件-->

    </form>

</body>

    <script type="text/javascript">

        function yz()                        //封装一个<body>中做成点击事件的函数

        {

            var nn = document.getElementById("nn");   //通过id名 找到 元素并重新 赋值

            if(nn=="" || "null")                //判断条件

            {

                alert("用户名不能为空");           //输出不满足条件的提示内容

                return false;

            }

            else

            {

                return true;       //满足条件时将执行表单的action

            }

        }

    </script>

当条件不满足时输出结果为：

当满足条件时，自动跳转页面。

实例2：相等验证，验证两次输入 的内容是否相同。

</head>

<body>

    <form action="aa.html" method="post">     <!--<form> 中的两个必要属性：action,method-->

        用户名<input type="text" name="nn" id="nn" />

        密码：<input type="text" name="mm" id="mm" />

        确认密码：<input type="text" name="qr" id="qr" />

        <input type="submit" value="登陆" id="b1" onclick= "return yz()" />  <!--onclick属性添加点击事件-->

    </form>

</body>

    <script type="text/javascript">

        function yz()                        //封装一个<body>中做成点击事件的函数

        {

            var nn = document.getElementById("nn").value;   //通过id名 找到 元素并重新 赋值

            var mm = document.getElementById("mm").value;

            var qm = document.getElementById("qr").value;

            if(nn=="" || null)                //判断条件

            {

                alert("用户名不能为空！");           //输出不满足条件的提示内容

                return false;

            }

            else if(mm =="" || null)

            {

                alert("密码不能为空！");

                return false;

            }

            else if(qr =="" || null)

            {

                alert("密码不能为空！");

                return false;

            }

            else if(mm != qr)

            {

                alert("密码不一致！");          //两次输入密码不同时的提示内容

                return false;

            }

            else

            {

                return true;       //满足条件时将执行表单的action

            }

        }

    </script>

若两次输入的密码不同，弹出提示：

小结：有点小逻辑

JS-表单非空验证的更多相关文章

  1. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

  2. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  3. .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效

    RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...

  4. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  5. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  6. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  7. JS表单原生验证器

    一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无 ...

  8. Js表单验证控件（使用方便，无需编码）-01使用说明

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  9. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

随机推荐

  1. Redis——进阶

    redis的持久化 redis提供两种备份方式,一种是RDB 一种是AOFRDB默认开启.关闭注释掉所有的save,存储的是redis 具体的值,会压缩存储.AOF配置文件中appendonly ye ...

  2. other#nginx配置

    #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...

  3. 059、Java中定义一个有参数无返回值的方法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. hbase hbck及region RIT处理

    hbase hbck主要用来检查hbase集群region的状态以及对有问题的region进行修复. hbase hbck :检查hbase所有表的一致性,如果正常,就会Print OK hbase ...

  5. GDI4

    前几篇我已经向大家介绍了如何使用GDI+来绘图,并做了一个截图的实例,这篇我向大家介绍下如何来做一个类似windows画图的工具.个人认为如果想做一个功能强大的绘图工具,那么单纯掌握GDI还远远不够, ...

  6. EditText标签的使用

    前文: 介绍EditText的使用,这个是文本输入控件,用来输入文本内容 使用: EditText继承TextView所以TextView的东西EditText都可以使用 text:显示文本 text ...

  7. UVA - 211 The Domino Effect（多米诺效应）（dfs回溯）

    题意:根据多米诺骨牌的编号的7*8矩阵,每个点可以和相邻的点组成的骨牌对应一个编号,问能形成多少种由编号组成的图. 分析:dfs,组成的图必须有1~28所有编号. #pragma comment(li ...

  8. CharacterEncodingFilter这个spring的过滤器

    org.springframework.web.filter.CharacterEncodingFilter 对请求于响应的编码进行过滤,半路出家的和尚总是对什么都感觉到好奇,都想记录下来(

  9. 091-PHP数组过滤函数array_filter，过滤非整数

    <?php function not_int($x){ //定义过滤非整数的函数 if(is_int($x)) return TRUE; } $arr=array(1,2,'a',3,4,'c' ...

  10. ICE使用记录

    在使用ice中间件的过程中 如果A继承了 ****Disp_类 在使用A类的时候 ****Disp_类会浅表克隆该类出一个新的对象a 在调用重写的接口的时候是使用a 在主动调用A类的对象的时候使用的才 ...