密码验证Jquery

时间:2017-03-20 19:01:12

标签: jquery html validation

javascript / jquery非常新。如果用户输入的字符少于所需的字符数并尝试将鼠标按钮移出文本框,我会尝试显示错误消息。我无法让代码工作。任何建议将不胜感激!     

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="jquery-3.1.1.min.js"></script>
    </head>

    <body id="bg">
        <div class="main">
        <form id="fillout">
            <legend id="lgnd">
                Login Credentials
            </legend>
            <label id="usrname">
                Username:
                <input type="text" name="user" maxlength="15">
            </label>
            <br/>
            <label id="pwd">
                Password:
                <input id="entered" type="text" name="pass" maxlength="20">
            </label>
            <p id="feedback"></p>
            </form>
        </div>
    <script>
        $(function(){
            var $feedback = $('li#feedback');
            var $username = $('label#usrname');
            var $entered = $('#entered');
            var minpass = 8;
            $username.on('mouseout', function(){
                if ($entered.length < minpass)
                    $feedback.text("Password must be six characters")
            })

        });

        </script>
    </body>
</html>

2 个答案:

答案 0 :(得分:2)

两个小的改动应该可以满足你的需要。

 //get the selected or entered value first

 var _val = $entered.val()

//now check the length of it

 _val.length < minpass

答案 1 :(得分:1)

  • 1)不要忘记分号和括号,非常重要
  • 2)您想要的长度是元素中的值而不是元素本身
      

    ($ entered.val())的长度;   并不是   $ entered.length;

  • 3)如果满足条件,请包含一个其他内容以使消息消失或将消息替换为另一个消息。
  • 4)如果标签的id仅使用id,则执行相同的目的,您不必包含元素标记。

这将做你想要的事情

        $(function(){
            var $feedback = $('#feedback');
            var $username = $('#usrname');
            var $entered = $('#entered');
            var minpass = 8;
            $username.on('mouseout', function(){
                if (($entered.val()).length < minpass){
                    $feedback.text("Password must be six characters");
                }else{ $feedback.text("proceed message"); }
            });
        });

然而

计算鼠标输出中输入的字符可能不是一个好主意,因为你可能永远不会将鼠标悬停在事件处理程序上,甚至不能使用键盘或触摸屏选择文本框,从而无法完成计数的全部目的。您宁愿验证提交表单,甚至只是在焦点从文本框转移时。另外,为什么在测试密码时将事件处理程序放在用户名上?我希望这有助于......