0

我有一个包含三个必填字段的小表单。

<div class="span5 offset3 well">
  <legend>To begin, please enter the info below</legend>
  <div class="alert alert-error hide" id="error">
    <span>Incorrect Username or Password!</span>
  </div>
        <form accept-charset="UTF-8" action="" method="POST" name="check_form" id="check_form">
    <p>
      <label>Student ID</label>
      <input type="text" id="txtEmplid" placeholder="Student ID" name="txtEmplid" class="span5">
    </p>
    <p>
      <label>Email address</label>
      <input type="text" placeholder="Email address" id="txtEmail" name="txtEmail" class="span5">
    </p>
    <p>
      <label>OR</label>
    </p>
    <p>
      <label>DOB</label>
      <input type="text" placeholder="Date of Birth" id="dob" name="dob" class="span5">
    </p>
    <button type="submit" id="doCheck" name="doCheck" class="btn btn-warning">Submit</button>
    <input type="hidden" value="form-submit" name="form-submit">
  </form>
</div>

本来，这很好。但是，现在我需要对其进行修改，以便用户需要输入 ID 和其他两个中的至少一个。例如。Id 和 DOB 已填写，但 Email 为空白。

最初，我编写了一个小的 jQuery 函数，用于将任何空文本框的背景颜色更改为红色。这是该代码：

function doFieldEmpty(input) {

    var ic = 0;
    var $i = input;

    $i.each(function( index, value ) {

        // if empty, add red background class
        if ($(this).val() == '') {

            $(this).addClass('inputerror')
                   .attr('placeholder', 'Required')
                   .val(index);
        } else {

            $(this).removeClass('inputerror');

        }
    });
}

我用这个来称呼它。

doFieldEmpty($("#studentid, #email, #dob"));

由于这段代码已经循环通过 jQuery 对象，我有点犹豫是否要编写另一个函数来满足我的需求。

所以我的问题是，我怎样才能修改它两者兼而有之的功能。

我希望我已经对我正在寻找的内容进行了足够详细的解释。提前致谢。

4

2 回答 2

0

如果您真的只有 3 个字段并且只是检查您提到的条件，那么您最好用基本的 2 条件检查替换现有代码：

function validateFields() {
    $('input').removeClass('inputerror');

    // Check if ID is blank
    if( $('#studentid').val() === '') {
        $('#studentid').addClass('inputerror');
    }

    // Check if both email and dob are blank
    if( $('#email').val() === '' && $('#dob').val() === '' ) {
         $('#email, #dob').addClass('inputerror');   
    }
}

演示：http: //jsfiddle.net/3X86W/

于 2013-04-04T22:48:43.813 回答
0

如果在 for each 循环中传递一个附加参数 minimumRequired 并增加计数呢？ 

function doFieldEmpty(input, minimumRequired) {

var ic = 0;
var $i = input;
var emptyCount = 0;

$i.each(function( index, value ) {

    // if empty, add red background class
    if ($(this).val() == '') {
        emptyCount++;
        if(emptyCount >= minimumRequired){
        $(this).addClass('inputerror')
               .attr('placeholder', 'Required')
               .val(index);
        }
    } else {

        $(this).removeClass('inputerror');

    }
});
}
于 2013-04-04T22:54:04.177 回答