重点：

　　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. ASCII 对照表

    ASCII(American Standard Code for Information Interchange,美国信息互换标准代码,ASCⅡ)是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英 ...

  2. H5表单基础知识（二）

    表单新增属性 <!--<input type="text" class="name" />--> <!-- placeholder ...

  3. Leetcode 106

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  4. java plsql 调用oracle数组类型

    首先当然是在oracle中建立type CREATE OR REPLACE TYPE cux_proxy_bid_award_rec IS OBJECT ( trading_partner_id NU ...

  5. OC @property @synthesize和id

    文顶顶   OC语言@property @synthesize和id OC语言@property @synthesize和id 一.@property @synthesize关键字 注意:这两个关键字 ...

  6. Mybatis学习总结-----mybatis中refid是什么意思(十)

    1.首先定义一个sql标签,一定要定义唯一id<sql id="Base_Column_List" >name,age</sql>2.然后通过id引用< ...

  7. html <form>相关表单

    action属性规定提交表单时,向何处发送表单数据 radio 分组 只要name一样,就是一组,即一组中只能选择一个. <input type="radio" id=&qu ...

  8. 通过url获取参数信息

    运行结果如下: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti ...

  9. python关于时间的计算，time模块

    import time, datetime # time.time 返回当前时间的时间戳(1970纪元后经过的浮点秒数)(格林尼治时间). # 1分钟60秒,1小时3600秒,1天86400秒. pr ...

  10. struts2 实现rest

    参考链接https://www.ibm.com/developerworks/cn/java/j-lo-struts2rest/