Question

专家我在这里不需要帮助。我有一个jsp页面，其中将进行三次验证：

密码强度（使用实时检查，非验证（）功能）
确认密码（使用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）中的任何一个失败时，我都无法阻止页面转发。我想限制电子邮件和电子邮件的操作Password_Strength也是。表示验证失败时将焦点设置为该字段。请注意，validate()函数仅用于Confirm_Password。

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
        } 
    });
});

你可以找到一个伪示例here，而here你可以找到$ .ajax的官方文档。如果我遇到问题，请告诉我;）

您可以为这样的控件编写一个简单的布尔函数：

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

Answer 2

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

1）使用PrimeFaces

2）使用p:remoteCommand代替按钮

中的操作

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

验证失败时阻止操作

2 个答案: