重点：

　　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. java后台校验 hibernate validator

    链接 : https://www.cnblogs.com/softidea/p/6044123.html

  2. CSS——图片替换方法：Fahrner图片替换法（FIR）

    Html: <h1 id="fir"><span>Fahrner Image Replacement</span></h1> CSS ...

  3. Android ListView常见配置说明

    ListView是我们经常使用的控件,但是使用中却因为各种原因无法设置出我们需要的效果,现将常用的设置记录下来方便以后查询. 1.拖动时背景变黑 android:cacheColorHint=&quo ...

  4. JAVA反射会降低你的程序性能吗?

    原文出处 早两天写了<从把三千行代码重构成15行代码谈起>这篇文章,看到评论中有一些同学的回复还是在质疑反射的性能,好像程序用上了反射,就像开上了拖拉机似的.本来我觉得这个话题没有什么好讨 ...

  5. ASCII 对照表

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

  6. English trip -- VC(情景课)9 A Get ready

    She is doing homwork He is doing laundry He is drying the dishes She is making lunch She is making t ...

  7. Jzzhu and Numbers CodeForces - 449D (高维前缀和,容斥)

    大意: 给定集合a, 求a的按位与和等于0的非空子集数. 首先由容斥可以得到 $ans = \sum \limits_{0\le x <2^{20}} (-1)^{\alpha} f_x$, 其 ...

  8. homestead 暴露接口到外网

    laravel 官方推荐的运行环境是homestead,但homestead是个虚拟机,你自己访问没问题,给别人联调怎么办? 一个大型项目肯定不止一个人开发,这个时候就需要将你虚拟机上的接口暴露给外网 ...

  9. 关于vue Unexpected identifier 问题

    vue对于es6虽然自带babel转换 但是在index.html文件中并不会发生转换 因此在index.html中使用新的语法会导致低版本浏览器不识别代码因此报出Unexpected identif ...

  10. 新学dfs（看懂了）

    在N*N的迷宫内,“#”为墙,“.”为路,“s”为起点,“e”为终点,一共4个方向可以走.从左上角((0,0)“s”)位置处走到右下角((n-1,n-1)“e”)位置处,可以走通则输出YES,不可以走 ...