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>
  • 相关阅读:
    需求分析模板
    【转】卓有成效的敏捷开发流程
    敏捷建模者的个性
    四个凡事:有章可循,有人负责,有据可查,有人监督
    全局变量初始化的重要性
    Windows下虚拟串口工具:com0com可做串口调试用
    【转】各种加解密算法比较
    WSASocket函数未定义和重定义错误
    海明校验码
    stl学习总结
  • 原文地址:https://www.cnblogs.com/di2wu/p/10035789.html
Copyright © 2011-2022 走看看