<!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. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  2. Python链接liunx 带尝试

    本文实例讲述了python下paramiko模块实现ssh连接登录Linux服务器的方法.分享给大家供大家参考.具体分析如下: python下有个paramiko模块,这个模块可以实现ssh登录lin ...

  3. 有关shell中冒号的特殊用法

    有关shell中冒号的特殊用法,供朋友们参考. : ${VAR:=DEFAULT} 当变量VAR没有声明或者为NULL时,将VAR设置为默认值DEFAULT.如果不在前面加上:命令,那么就会把${VA ...

  4. JVM加载class文件原理

    装载的概念 所谓装载就是寻找一个类或是一个接口的二进制形式并用该二进制形式来构造代表这个类或是这个接口的class对象的过程. Java中类装载器装载类到虚拟机 在Java中,类装载器把一个类装入Ja ...

  5. JS原型链详解（2）

    深入理解javascript原型链 在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下 ...

  6. macOS gcc g++ c++ cc

    安装完Xcode之后,系统中默认的编译器不再是Gcc系列,编译一些库的时候经常产生问题. 在PATH变量中设置symbol link,把gcc,g++,c++,cc全链接到Gcc系列.

  7. 【leetcode】1030. Matrix Cells in Distance Order

    题目如下: We are given a matrix with R rows and C columns has cells with integer coordinates (r, c), whe ...

  8. Period POJ - 1961

    Period POJ - 1961 时限: 3000MS   内存: 30000KB   64位IO格式: %I64d & %I64u 提交 状态 已开启划词翻译 问题描述 For each ...

  9. 浅谈关于SQL优化的思路

    零.为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 一.观察 MySQL优 ...

  10. p4463 [国家集训队] calc

    分析 代码 #include<bits/stdc++.h> using namespace std; ][],Ans; inline int pw(int x,int p){ ; whil ...