重点：

　　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. Spring AMQP 源码分析 08 - XML 配置

    ### 准备 ## 目标 通过 XML 配置文件使用 Spring AMQP ## 前置知识 <Spring AMQP 源码分析 07 - MessageListenerAdapter> ...

  2. Insert Delete GetRandom O(1)

    2018-07-15 18:36:29 问题描述: 问题求解: private ArrayList<Integer> ls; private HashMap<Integer, Int ...

  3. English trip -- Phonics 1 ar

    Xu言: Learning is not a happy thing, but happiness always comes with learning...    - loki.valentine ...

  4. 3-30 flash(api)，rescue_from(); logger简介

    ActionDispatch::Flash < Objec pass temporary primitive-types (String, Array, Hash) between action ...

  5. php--------ThinkPHP3.2验证码使用

    Thinkphp框架验证码的路径目录:ThinkPHP -> Library -> Think -> Verify.class.php ,只要在控制器中实例化这个类就能实现验证码的功 ...

  6. python-day15函数递归

    1.递归: 在函数内,调用自己.  (技巧: 每次调用时,函数前面需加上return,这样返回值就可以一层一层 的返回去) #def age(n):#    if n == 1:#        re ...

  7. 4.2 event

    using System; public delegate void DownloadStartHandler(object sender, DownloadStartEventArgs e); // ...

  8. Form嵌入到Panel里(C#)

    直接把这个 Form嵌入到一个 Panel中即可. 示例如下: 要嵌入的 Form: public partial class FormEmbed : Form { public FormEmbed( ...

  9. JavaScript In OA Framework

    原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...

  10. 55. 45. Jump Game II *HARD*

    1. Given an array of non-negative integers, you are initially positioned at the first index of the a ...