重点：

　　1、表单的提交

　　2、触发blur事件

　　3、判断是否正确，提交与否 return False

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<form action="http://localhost/reg">

    <p>

        用户名：

    </p>

    <p>

        <input type="text" name="username" id="username" >

        <span id="username_error"></span>

    </p>

     <p>

        密码：

    </p>

    <p>

        <input type="text" name="pwd" id="pwd">

        <span id="pwd_error"></span>

    </p>

    <p>

        确认密码：

    </p>

    <p>

        <input type="text" name="repwd" id="repwd">

        <span id="repwd_error"></span>

    </p>

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

</form>

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

<script>

    $("form").submit(function () {

        $("input[type='text']").trigger('blur');

        total = ;

        $("input[type='text']").each(function () {

//            total += parseInt($(this).attr("s"));

            total += $(this).data("s");

        });

        console.log(total);

        if(total != ){

            return false;

        }

    });

    $("#username").blur(function () {

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

        if(username.length < ){

            $(this).data({"s":});

            $("#username_error").text("用户名小于6位").css({"color":"red"});

        }else{

            $(this).data({"s":});

            $("#username_error").text("");

        }

    });

    $("#pwd").blur(function () {

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

        if(pwd.length < ){

            $(this).data({"s":});

            $("#pwd_error").text("密码小于8位").css({"color":"red"});

        }else{

            $(this).data({"s":});

            $("#pwd_error").text("");

        }

    });

    $("#repwd").blur(function () {

        var pwd = $("#pwd").val();

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

        if(pwd != repwd){

            $(this).data({"s":});

            $("#repwd_error").text("两次密码不一致").css({"color":"red"});

        }else{

            $(this).data({"s":});

            $("#repwd_error").text("");

        }

    });

</script>

</body>

</html>

前端jquery---表单验证的更多相关文章

  1. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  2. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  3. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  4. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  5. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  6. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  7. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  8. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  9. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  10. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

随机推荐

  1. php7 编译 win32ps 模块

    碰到了很多问题 ,但最终都解决了,感觉不错. 1)下载 php source, php sdk, 以及 win32ps的源代码 2) 参照下面的连接进行编译. https://wiki.php.net ...

  2. SVN提交文件失败：系统找不到指定路径

    完成程序代码工作后,进行SVN的文件提交.先进行项目的更新,然后在修改的文件上进行提交操作,发现SVN弹出提示信息,“系统找不到指定路径”提交失败,如下图:                       ...

  3. java后台读取/解析 excel表格

    需求描述 前台需要上传excel表格,提交到后台,后台解析并返回给前台,展示在前台页面上! 前台部分代码与界面 <th style="padding: 7px 1px;width:15 ...

  4. 20170528xlVBA凑数一例

    Public Sub MakeUp() Dim Sht As Worksheet Set Sht = ThisWorkbook.Worksheets("设置") Dim Total ...

  5. 29 Socketserver和 ftp

    一.Socketserver #服务端 import socketserver class KnightServer(socketserver.BaseRequestHandler): def han ...

  6. 23 正则表达式和re模块

    一.正则1.字符组 [a-zA-Z0-9]字符组中的 [^a] 除了字符组的 2. 3. 4. 二.re模块 re.S 设置 .的换行 obj=re 1.ret=re.search(正则,conten ...

  7. Knights of a Polygonal Table CodeForces - 994B (贪心)

    大意:n个骑士, 每个骑士有战力p, 钱c, 每个骑士可以抢战力比他低的钱, 每个骑士最多抢k次, 对每个骑士求出最大钱数 按战力排序后, 堆维护动态前k大即可 #include <iostre ...

  8. python-day7-字符串类型的内置方法

    # name='egon' #name=str('egon')# print(type(name)) #优先掌握# 移除空白strip# msg=' hello '# print(msg)# prin ...

  9. Oracle11g温习-第五章：数据字典

    1.数据字典(Data dictionary)的功能 1)   central of oracle   database               每个oracle数据库的核心 2)   descr ...

  10. Oracle性能诊断艺术-读书笔记

    create table test0605 as select * from dba_objects; select t1.owner,t1.object_name,t1.object_id from ...