JS 验证问题答案

【问题标题】：JS validation issueJS 验证问题
【发布时间】：2011-11-07 13:55:19
【问题描述】：

我的验证函数看起来像这样。

var fname = $("#fname").val();
var lname = $("#lname").val();

function validate() {
    var isValid = true;
     if (!fname) {
            $("#fname").attr('class', 'invalid');
            isValid=false;
        }

    if (!lname) {
        $("#lname").attr('class', 'invalid');
        isValid=false;
    }

它只是改变了未填充输入框的类别。

我知道我可以为每个if 写else，如果用户填写一些输入，我可以改回默认值 (class="valid")。但是我怎样才能为所有输入创建通用的东西，以将用户在第一次验证错误后填写的输入改回默认类？

【问题讨论】：

您可以使用addClass 方法。将invalid 类添加到对象$('your_selector').addClass('invalid') 并在验证后使用$('your_selector').removeClass('invalid')

标签： javascript jquery css validation

【解决方案1】：

那是好图拉尔！但是，为什么在您的代码中进行了过多的处理？这会增加不必要的压力。由于您，对于您“解决”的问题，会将“有效”类添加到所有输入类型文本或密码，只需将其添加到直接代码中的实际输入元素：

<input class='valid' ..... />

现在，回到你最初的验证：为什么不让它通用？：

function validate(formField) {
    if !formField $('#'+formField).removeClass('valid').addClass('invalid');
}

或者类似的东西......

【讨论】：

我已经添加了有效的课程 + 再次阅读我的答案。那就是按键功能，“将为所有输入类型文本或密码添加“有效”类”-仅当用户按下键时才会添加有效类
其中一种方法是：form .... onSubmit='validateIt(this);'和一个验证它会遍历表单中的项目并将每个项目发送到验证（项目）。例如：function validateIt(formID) { for each ... validate(item) ... }
if !formfield 位在语法上无效。删除这两个令牌会更接近您想要做的事情。
你修复了什么？ SO应该有能力删除所谓的“编辑器”修复。现在我不知道我能多相信你（不是我不相信）已经解决了......一个不存在的问题...... 13 天。

【解决方案2】：

您可以假设一切都是有效的，然后尝试反驳它，或者您可以尝试证明它的有效性。下面采用第一种方法并将所有类设置为“有效”以保持一致。

function validate() {
  // Get the current form input state.
  var fname = $("#fname");
  var lname = $("#lname");

  // Assume everything valid until proven otherwise.
  var isValid = true;
  fname.attr('class', 'valid');
  lname.attr('class', 'valid');

  if (!fname.val()) {
    fname.attr('class', 'invalid');
    isValid=false;
  }

  if (!lname.val()) {
    lname.attr('class', 'invalid');
    isValid=false;
  }

  return isValid;
}

【讨论】：

【解决方案3】：

好的。我找到了路

  $('input[type="text"],input[type="password"]').keypress(function () {
        $(this).attr('class', 'valid');
});

【讨论】：