<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .error{

            color: red;

        }

    </style>

</head>

<body>

    <form id="f1" action="s5.html" method="POST">

        <div><input name="n1" tex = "用户名" type="text" /></div>

        <div><input name="n2" tex = "密码" type="password" /></div>

        <div><input name="n3" tex = "邮箱" type="text" /></div>

        <div><input name="n4" tex = "端口" type="text" /></div>

        <div><input name="n5" tex = "IP" type="text" /></div>

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

        <!--有时候网络速度慢，图片加载慢，所以会先加载图片框然后就开始绑定事件-->

        <!--<img src="...">-->

    </form>

    <script src="jquery.js"></script>

    <script>

        // 当页面框架加载完毕后，自动执行

        $(function(){

            $.Login('#f1')

        });

        $(function(){

            // 当页面所有元素完全加载完毕后，执行

            $(':submit').click(function () {

                $('.error').remove();

                var flag = true;

                $('#f1').find('input[type="text"],input[type="password"]').each(function () {

                    var v = $(this).val();

                    var n = $(this).attr('tex');

                    if(v.length <= 0){

                        flag = false;

                        var tag = document.createElement('span');

                        tag.className = "error";

                        tag.innerHTML = n + "必填";

                        $(this).after(tag);

                        // return false;

                    }

                });

                return flag;

        });

        });

//        $(':submit').click(function () {

//            var v = $(this).prev().val();

//            if(v.length > 0){

//                return true;

//            }else{

//                alert('请输入内容');

//                return false

//            }

//        })

    </script>

</body>

</html>

　　

jquery实现表单验证与页面加载之后执行渲染的更多相关文章

  1. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  7. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  8. Jquery 实现表单验证，所有验证通过方可提交

    1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. 一款由jquery实现的超炫的页面加载特效

    今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览   源码下载 实现的代码. ...

随机推荐

  1. 二、搭建Swagger

    1.新建.netCore webapi项目 2.安装swagger ,通过 Package Manager 控制台:Install-Package Swashbuckle.AspNetCore 3.修 ...

  2. unixbench

    1.下载 https://github.com/kdlucas/byte-unixbench/archive/v5.1.3.tar.gz 2.修改Makefile 交叉编译 #CC=gccCC = a ...

  3. 手工实现Array List和Linked List

    Array List样例: /** * 增加泛型 * 自动增加数组容量 * 增加set.get方法:增加数组边界的检查 * 增加remove方法 */package cn.study.lu.four; ...

  4. error: call of overloaded ‘sqrt(double&)’ is ambiguous

    OpenFOAM定义了新的sqrt,当引入新的Library时,必须显式地使用std::sqrt(),否则会报如下错误: error: call of overloaded 'sqrt(double& ...

  5. mysql和haproxy高可用

    这片文章主要介绍mysql+haproxy+keepalived的高可用使用. 有两种模式: 第一种:数据库宕机触发VIP漂移的高可用使用. 第二种:haproxy宕机出发VIP漂移的高可用. 这两种 ...

  6. Netty学习笔记（一）

    学习圣思园Netty笔记,个人理解 2.netty宏观理解-本节内容: 1.阶段性事件驱动,一个请求分为若干阶段处理,每个阶段根据情况合理分配线程去处理,各阶段间通信采用异步事件驱动方式. 2.net ...

  7. 【Java】Java中charAt()方法的使用

    说明 java.lang.String.charAt() 方法返回指定索引处的char值.索引范围是从0到length() - 1.对于数组索引,序列的第一个char值是在索引为0,索引1,依此类推 ...

  8. 在浏览器地址栏中查看cookie

    在IE地址栏中输入javascript:alert(document.cookie) 或者地址栏直接打javascript:document.write(document.cookie);

  9. hook原生打包流程

    将实际执行的Transform换成了MatrixTraceTransform public static void inject(Project project, def variant) { //获 ...

  10. php面试专题---9、会话控制考点

    php面试专题---9.会话控制考点 一.总结 一句话总结: 面向对象.设计模式这些特别好用,需要融会贯通 1.请写出PHP类权限控制修饰符? public.protected.private 2.p ...