<!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. python面向对象--类的内置方法

    #isinstance(obj,cls)判断obj是否是类cls的实例 #issubclass(cls,cls1)判断cls是否是cls1的子类或派生类 class Foo: pass class B ...

  2. nginx-博客阅读笔记记录-20190916

    Nginx 入门学习教程 Ng官网解释: nginx [engine x]是最初由Igor Sysoev编写的HTTP和反向代理服务器,邮件代理服务器和通用TCP / UDP代理服务器. 维基百科解释 ...

  3. mitmproxy 使用mitmdump 过滤请求

    mitmproxy 抓包工具,优点可以使用python进行二次开发,或者进行接口的mock 官网地址:https://www.mitmproxy.org/ 打算用这个最初的需求是,想对app做接口测试 ...

  4. 数据库（一）：事务的特性与事务（在同一个 JVM 中）的传递

    参考文章 https://blog.csdn.net/shuaihj/article/details/14163713 https://blog.csdn.net/shfqbluestone/arti ...

  5. shiro安全框架学习-1

    1. apche shiro 是Java的一个安全)框架 2.shiro可以非常容易的开发出足够好的应用,不仅可以在JavaSE环境,也可用在JavaEE环境 3. shiro可以完成 认证,授权,加 ...

  6. AI 一体机，满足新时代的新需求

    AI 变革带来哪些 IT 的新要求? 深度学习的突破和硬件的突飞猛进,使得人工智能“第n春”焕发蓬勃生机.这是历史上第一次,机器可以在如人脸识别等‘人类’工作上做得比我们人类更好. 人工神经网络有许多 ...

  7. Oracle分组函数之Grouping Sets

    功能介绍: 自定义分组的字段 创建表: 插入测试数据: Grouping Sets(null,t.classid,(t.classid,t.studentname)),类似于ROLLUP Select ...

  8. 项目部署到tomcat上

    1:先讲解一下tomcat的各个目录的作用 2:将项目打包成war的格式,然后放到webapps chengtai   是启动项目的时候自动解压的,不需要我们手动解压. 3:启动tomcat 进入到b ...

  9. 路由Vue-router 的使用总结

    1.关于 router-view 匹配 vue 项目使用 vue-router,所有的根级别的路由都是在 App.vue 文件中的 router-view 中渲染的.比如下面的 path: '/' . ...

  10. xiugai完了

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...