当验证失败时防止操作

Question

当验证失败时防止操作

3

专家，我需要一点帮助。我有一个JSP页面，需要完成三个验证：

密码强度（使用实时检查，而不是validate()函数）
确认密码（使用validate()函数，而非实时检查）
电子邮件验证（使用实时检查，而不是validate()函数）

实时检查由keyUp()函数和相应的jQuery完成：

 $(document).ready(function(){

 $("#register-form").validate({
 rules: {
   password_again: {
      equalTo: "#password"
        }
                    }
 });


 $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validate/validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validate/validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

            $('#password').keyup(function(){
    $('#result').html(checkStrength($('#password').val()));
}); 

function checkStrength(password){

//initial strength
var strength = 0;

//if the password length is less than 6, return message.
if (password.length < 6) { 
    $('#result').removeClass();
    $('#result').addClass('short');
    return 'SHORT';
}

//length is ok, lets continue.

//if length is 8 characters or more, increase strength value
if (password.length > 7) strength += 1;

//if password contains both lower and uppercase characters, increase strength value
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1;

//if it has numbers and characters, increase strength value
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1;

//if it has one special character, increase strength value
    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1;

//if it has two special characters, increase strength value
    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;

//now we have calculated strength value, we can return messages

//if value is less than 2
if (strength < 2 ) {
    $('#result').removeClass();
    $('#result').addClass('weak');
    return 'WEAK';  
} else if (strength == 2 ) {
    $('#result').removeClass();
    $('#result').addClass('good');
    return 'GOOD';
} else {
    $('#result').removeClass();
    $('#result').addClass('strong');
    return 'STRONG';
}
}


});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

一切都运行良好，但是当点击提交按钮后，除了Confirm_Password验证之外，我无法阻止页面转发，如果其中任何一个验证（Confirm_Password、Password_Strength、Email）失败。我希望也能限制对Email和Password_Strength的操作。这意味着每当验证失败时，将焦点设置在该字段上。

请注意，validate()函数仅用于Confirm_Password。

- Somnath Kayal

出于某种原因，您决定在jQuery验证插件之外执行最复杂的表单验证例程。对于检查一个字段是否等于另一个字段这样最基本的任务来说，使用jQuery验证插件似乎非常无意义。不如再多花一点点功夫，干脆不使用jQuery验证插件。 - Sparky

其实我需要实时检查Email_Pattern和Password_Strength。为此，我将它放在validate()之外。有什么建议吗？ - Somnath Kayal

是的，我的建议是不要使用jQuery Validate来比较两个字段，这样会让事情变得更加复杂。 - Sparky

比较两个字段？？我在确认密码的情况下比较了两个字段，但是在Email_Pattern＆Password_Strength的情况下，我们该如何比较两个字段？请查看：http://www.htmldrive.net/items/show/823/jQuery-Email-Validation-effect.html#comment-871844433 - Somnath Kayal

你不理解的部分是什么？jQuery Validate 是一个强大的插件，但在大多数情况下，你甚至没有使用它。你正在绕过它去完成更复杂的任务。你可以在 keyup 处理程序中使用一些 jQuery 来确认两个密码字段是否相等（比较两个字段），然后由于你大多数时间都没有使用它，可以完全删除 jQuery Validate 插件。 - Sparky

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sniper Wolf · Answer 1

假设您的问题是如何在使用jQuery时防止处理数据，如果您看到/知道它们与jQuery本身不兼容，我建议使用$.ajax函数。使用此函数，您可以选择仅在一切顺利时发送请求。一个示例可能是这样的：

$(document).ready(function(){
    // Here your controls about password strenght, email, etc...
    $('#FORM-ID').submit(function(){
        var url = "YOUR_ACTION";

        // YOUR CONTROLS
        if( isOK() ) {
            $.ajax({
                type: "POST",
                url: url,
                // You can use any other way to pass the data,
                //    my favorite is to serialize with jQuery function
                data: $("#FORM-ID").serialize(),
                success: function(data){
                     // Success Message
                } else {
                     alert(data);
                }
             });
             return false;
        } else {
             // Display Error message
        } 
    });
});

你可以在这里找到一个伪例子，而这里则是$.ajax的官方文档。如果遇到问题，请告诉我；）

你可以为此类控件编写一个简单的布尔函数：

function isOk(parameters_to_check){
    if(all_conditions_are_true){
        return true;
    } else {
        return false;
    }

- Danubian Sailor · Answer 2

您没有指定您正在使用的JSF实现/库，但假设您想在JavaScript中执行许多操作，在您的情况下，您只想进行Javascript验证，我建议：

1）使用PrimeFaces

2）使用p:remoteCommand而不是按钮的操作

3）在p：commandButton中使用onclick而不是action，其中您将调用执行验证的函数，并仅在验证成功时调用远程命令。