重点：

　　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. Codeforces 919D - Substring

    919D - Substring 思路: 拓扑排序判环+DAG上dp+记忆化搜索 状态:dp[i][j]表示以i为起点的路径中j的最大出现次数 初始状态:dp[i][j]=1(i have no so ...

  2. NGUI实现简单的倒计时组件

    using System; using UnityEngine; public enum ETimerType { CommonFormat, // 78 77 76 75 ... TimeForma ...

  3. Java JDK5新特性-增强for

    2017-10-31 00:02:16 格式: for(元素数据类型 变量:数组或者Collection集合) { 使用变量即可,该变量即是元素 } int arr[] = {1,2,3,4,5}; ...

  4. js中如何访问对象和数组

    js中如何访问对象和数组 一.总结 一句话总结:js访问对象点和中括号,访问数组的话就是中括号 对象 . [] 数组 [] 1.js访问对象的两种方式? . [] 可以使用下面两种方式访问对象的属性和 ...

  5. Solaris 11, gcc 的安装

    注意点在于, 头文件在另外一个包system/header里,需要另外安装 pkg pkg install system/header

  6. Oracle OAF 应用构建基础之实现控制器 (转)

    原文地址: Oracle OAF 应用构建基础之实现控制器 设计一个OA Controller 如OA Framework Page解析中所描述的,OA Controller定义了web beans的 ...

  7. $digest already in progress 解决办法——续

    什么时候手动调用$apply()方法? 如果AngularJS总是将我们的代码wrap到一个function中并传入$apply(),以此来开始一轮$digest循环,那么什么时候才需要我们手动地调用 ...

  8. 使用axios发送post请求，将JSON数据改为为form类型

    我的github(PS:希望star):https://github.com/thWinterSun/v-admin 通常前端通过POST请求向服务器端提交数据格式有4中,分别是"appli ...

  9. 15 int *ptr= (int *)(&a+1)跨了整个数组长度

    分析以下程序,输出结果 2,5 #include<stdio.h> int main() { ]={,,,,}; ); printf(),*(ptr-)); ; } 分析: a 代表的是i ...

  10. Vue面试题整理

    1:什么是MVVM MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表视图层,负责将数据模型渲染到页面上,ViewModel通过双 ...