Question

我正在尝试为我的注册页面添加一些实时表单验证，但是只有我的电子邮件输入显示正确或错误输出，我的用户名或密码都没有，我已经尝试了过去的几个几小时看错了什么，但我在代码中找不到任何错误。希望有人能看到错误。

表格代码

 <form id="jform" action="" method="post" enctype="multipart/form-data">
                <div id="modal_content_left">
                Register

                <ul>

                    <li class="required" type="none">

                        <label>

                            <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>

                        </label>

                        <label>
                             <br />
                            <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>

                        </label>
                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>

                        </label>


                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
                        </label>
                    </li>


                </ul></form>

Jquery代码

// JavaScript Document

$(document).ready(function(){
    jVal = {

            'username' : function() {

            $('body').append('<div id="usernameInfo" class="info"></div>');

            var ele = $('#username');
            var pos = ele.offset();



            var patt = /^(?=.*[a-z].*)\w{8,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },




        'email' : function() {

            $('body').append('<div id="emailInfo" class="info"></div>');

            var ele = $('#email');
            var pos = ele.offset();



            var patt = /^.+@.+[.].{2,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },

        'password' : function(){

            $('body').append('<div id="passwordInfo" class="info"></div>');


            var ele = $('#password');
            var pos = ele.offset();


            if(ele.val().length < 6) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }

        },





    $('#username').change(jVal.username);
    $('#email').change(jVal.email);
    $('#password').change(jVal.password);

    $('input[name="agree_cons"]').change(jVal.agree);
});

Answer 1

您的代码没有任何问题。如果你包含jQuery和jQuery UI，它就可以工作。

这是一个有效的fiddle。我所做的唯一更改是：

包含jQuery
包含jQuery UI。
为.correct和.error

仔细检查您是否在自己的代码中执行了所有这些操作，并且应该获得预期的结果。

实时表单验证不会出现在某些输入中

1 个答案: