3

专家 我这里需要一点帮助。我有一个 jsp 页面,其中将完成三个验证:

  1. 密码强度(使用实时检查,不验证()功能)
  2. 确认密码(使用 validate() 函数,不实时检查)
  3. 电子邮件验证(使用实时检查,而不是 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、Password_Strength、Email)中的任何一个在点击提交按钮后失败时,我无法阻止页面转发,但 Confirm_Password 验证除外。我也想限制 Email & Password_Strength 的操作。意味着每当验证失败时,将焦点设置为该字段。请注意,该validate()函数仅用于 Confirm_Password。

4

2 回答 2

0

假设您的问题是如何防止使用 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;
    }
于 2013-04-21T16:41:57.983 回答
0

您尚未指定您正在使用的 JSF 实现/库,但假设您想在 JavaScript 中做很多事情,并且在您的情况下您只想进行 Javascript 验证,我建议:

1) 使用 PrimeFaces

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

3) in p:commandButtonuseonclick而不是action,您将在其中调用将进行验证的函数,并且仅在验证成功时才调用远程命令。

于 2013-04-21T16:47:54.427 回答