2

我对 jQuery 相当陌生，并且编写了以下代码来向用户显示他/她输入的密码/确认是否有效。我觉得代码是重复的和肮脏的，只有当用户不删除他们输入的部分内容时它才能正常工作。然后事情变得有点古怪。

这是 js 小提琴：http: //jsfiddle.net/JCTAc/

这是 JS *（忽略复选框的东西）：

$(function() {
  $('.checkbox').hide();
  $("#password").blur(function(){

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();

  if ( passwordVal.length >=6 ) {
       $("#password").css("border","1px solid #9EAD3A"); 
      }
  else {
       $("#password").css("border","1px solid #E93E3C");
      $('.checkbox').hide();
  }
});

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

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();

    if (passwordVal == checkVal) {
        if (checkVal.length > 5 ) {
        $("#password_confirmation").css("border","1px solid #9EAD3A");
        $(".checkbox").show(100);
    }
}
    else {
        $("#password_confirmation").css("border","1px solid #E93E3C");
        $('.checkbox').hide();
    }
});


$("#password,#password_confirmation").blur(function(){

var passwordVal = $("#password").val();
var checkVal = $("#password_confirmation").val();



    if (passwordVal != checkVal) {
        $('.checkbox').hide();
        $("#password_confirmation").css("border","1px solid #E93E3C");

    }
  });
});

​</p>

4

2 回答 2

1

你为什么不为此使用Jquery Validation。可能有帮助。

谢谢

于 2012-10-02T18:02:54.030 回答
1

首先，你不应该在 jQuery/javascript 中设置边框颜色。尽可能将样式和浏览器行为分开是很重要的。更好的方法是设置一个类（例如 .error、.validated）并从 css 控制样式。您还经常在代码中重复自己。相同的功能写了 3 次。将功能分解为功能的真正标志。

一个提示是如果输入未验证，则禁用提交功能，然后在验证时允许它。

我稍微修改了一下。验证模糊和键控。我相信这段代码也可以进行更多优化，但可能会略有改进：http: //jsfiddle.net/JCTAc/5/

于 2012-10-02T18:29:48.253 回答