Question

进入JS已有3年了，我不能使用简单的验证程序库。所以我决定创建自己的。它可以通过向所有输入，选择，文本区域等添加 jmust 属性（尚未在广播中尝试过）来工作。该函数检查输入是否为空并返回true。功能代码如下

通过调用函数进行工作，其形式为函数输入问题是，它不适用于我的选择输入。
这是我的示例代码

function jempty_form(x) {
  var n = false;
  $(x).find("[jmust]").each(function() {
    if ($(this).val() != "") {
      $(this).css("border", "none").css("border", "1px solid grey");
    } else {
      $(this).css("border", "1px solid red").addClass("animated shake");
      n = true;
      // alert("An input is Empty")
    }
  })
  return n;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class=" form-control " id="gender" jmust name="gender">
  <option disabled selected>Select Gender</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>
<script>
  jempty_form("#myformid");
</script>

谢谢..

Answer 1

您的$(this).val() != ""条件不适用于空选择，因为JS中的空字符串不等于null。

您可以简单地检查该值是否为truthy。这是通过简单测试$(this).val()来完成的，data-在条件的条件下进行评估时将转换为布尔值。

我还建议：

使用data-jmust属性（此处为function jempty_form(x) { var valid = true; $(x).find('[data-jmust]').each(function () { var action = $(this).val() ? 'removeClass' : 'addClass'; valid = valid && !!$(this).val(); $(this)[action]('invalid animated shake'); }); // For debugging purposes console.log(valid ? 'valid form' : 'invalid form'); return valid; } jempty_form('#myformid'); $(function () { $(':input').on('change', function (e) { jempty_form('#myformid'); }); });）代替无效属性，
将CSS类用于错误状态，而不是手动设置CSS（通过这种方式，您可以轻松地将输入恢复到其初始状态，并且不会将样式与功能混为一谈。）

演示：

.invalid { border: 1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myformid">
  <select data-jmust class="form-control" id="gender" name="gender">
    <option disabled selected>Select Gender</option>
    <option value="female">Female</option>
    <option value="male">Male</option>
  </select>
</form>

valid = valid && !!$(this).val();

仅对!!行进行一些解释，这是一种快速的表达方式：“如果表单已经有效（在当前字段之前）并且当前输入的值也不为空，则该表单是有效的” 。

使用color将该值转换为一个布尔值，指示其是否为 truthy 。

Answer 2

<form id="myformid" action="" method="POST"> 
    <select class=" form-control " id="gender"  jmust name="gender">
        <option  disabled selected>Select Gender</option>
        <option value="female" >Female</option>
        <option value="male">Male</option>
    </select>

</form> 
<script
    src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<script language="JavaScript">

    function jempty_form(x) {
        var n = false;
        $(x).find("[jmust]").each(function () {
            if ($(this).val()) {
                $(this).css("border", "none").css("border", "1px solid grey");
            } else {
                $(this).css("border", "1px solid red").addClass("animated shake");
                n = true;
                // alert("An input is Empty")
            }
        })
        return n;
    }

    console.log(jempty_form("#myformid"));

</script>
</body>
</html>

我做了些小改动，

if ($(this).val()) {

代替

if($(this).val() != ""){

对于select

2 个答案: