zoukankan      html  css  js  c++  java
  • 前端jquery---表单验证

    重点:

      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 = 0;
            $("input[type='text']").each(function () {
    //            total += parseInt($(this).attr("s"));
                total += $(this).data("s");
            });
    
            console.log(total);
            if(total != 3){
                return false;
            }
    
        });
    
    
        $("#username").blur(function () {
            var username = $(this).val();
            if(username.length < 6){
                $(this).data({"s":0});
                $("#username_error").text("用户名小于6位").css({"color":"red"});
            }else{
                $(this).data({"s":1});
                $("#username_error").text("");
            }
        });
    
        $("#pwd").blur(function () {
            var pwd = $(this).val();
            if(pwd.length < 8){
                $(this).data({"s":0});
                $("#pwd_error").text("密码小于8位").css({"color":"red"});
            }else{
                $(this).data({"s":1});
                $("#pwd_error").text("");
            }
        });
    
    
        $("#repwd").blur(function () {
            var pwd = $("#pwd").val();
            var repwd = $(this).val();
            if(pwd != repwd){
                $(this).data({"s":0});
                $("#repwd_error").text("两次密码不一致").css({"color":"red"});
            }else{
                $(this).data({"s":1});
                $("#repwd_error").text("");
            }
        });
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    Java系列: JAVA字符串格式化-String.format()的使用(zz)
    Eclipse系列: 在Eclipse中用TODO标签管理任务(Task)(ZZ)
    JNDI全面总结(zz)
    Java Platform Standard Edition 8 Documentation
    JAVA NIO是什么(zz)
    Java NIO框架Mina、Netty、Grizzly介绍与对比(zz)
    Bootstrap系列 -- 25. 下拉菜单分割线
    Bootstrap系列 -- 24. 下拉菜单基本用法
    Bootstrap系列 -- 23. 图片
    Bootstrap系列 -- 22. 按钮详解
  • 原文地址:https://www.cnblogs.com/di2wu/p/10035789.html
Copyright © 2011-2022 走看看