Question

我创建了一个表单和一个表单验证脚本，用于检查是否填写了所有字段，名称和城市字段仅包含字母，年龄和电话字段仅包含数字以及输入的电子邮件是否有效。在控制台中使用时，所有语句均有效，但是当我填写每个字段或在电子邮件字段或电话号码和年龄字段中填写无效值时，我仍然收到一条错误消息，指出姓名和城市字段必须仅包含字母。

我尝试单独写出每个语句，并逐一检查它们。

HTML和JS

<form>
  <div class="form-group">
    <label for="inputName">Name</label>
    <input type="name" class="form-control" id="inputName" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label for="inputName">Age</label>
    <input type="age" class="form-control" id="inputAge" placeholder="Enter age">
  </div>
  <div class="form-group">
    <label for="inputCity">City</label>
    <input type="city" class="form-control" id="inputCity" placeholder="Enter city">
  </div>
  <div class="form-group">
    <label for="InputEmail1">Email address</label>
    <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
  </div>
  <div class="form-group">
    <label for="inputPhone">Phone number</label>
    <input type="phone" class="form-control" id="inputPhone" placeholder="Phone number">
  </div>
  <button type="button" class="btn btn-primary submit">Submit</button>
  <button type="button" class="btn btn-primary erase">Erase</button>
</form>

<script>
function validateForm() {
    var name_cityRegex = /^[a-zA-Z]+$/;
    var emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    var age_phoneRegex = /^\d+$/;
    var nameValue = $('#inputName').val();
    var cityValue = $('#inputCity').val();
    var ageValue = $('#inputAge').val();
    var phoneValue = $('#inputPhone').val();
    var nameResult = name_cityRegex.test(nameValue);
    var cityResult = name_cityRegex.test(cityValue);
    var ageResult = age_phoneRegex.test(ageValue);
    var phoneResult = age_phoneRegex.test(phoneValue);
    var mailValue = $('#InputEmail1').val();
    var mailResult = emailRegex.test(mailValue);
    $(".btn.btn-primary.submit").click(function () {
        $('.form-control').each(function () {
            if ($(this).val() == "") {
                $('.alert.alert-danger').show();
            }
            else if (nameResult == false || cityResult == false) {
                $('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
                $('.alert.alert-danger').show();
                return false;
            }
            else if (ageResult == false || phoneResult == false) {
                $('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
                $('.alert.alert-danger').show();
                return false;
            }
            else if (mailResult == false) {
                $('.alert.alert-danger').text("Please enter a valid email adress");
                $('.alert.alert-danger').show();
                return false
            }
            return true;
        })
});
</script>

当我将所有字段留空时，警告就可以了。但是，当我执行其他任何操作时，只会收到警告，我只能在“名称”和“城市”字段中使用字母。

初学者将非常感谢所有帮助！

Answer 1

我真的不知道为什么您的测试会给您带来错误，但是我认为您的$('.form-control').each毫无用处。

在本教程中，您将测试每个字段的所有字段。

也许可以尝试不使用此foreach，只需在您单击按钮时通过删除以下代码来测试所有字段：

$('.form-control').each(function () {
    if ($(this).val() == "") {
        $('.alert.alert-danger').show();
    }
})

我没有看到其他任何问题。

Answer 2

我认为您无法在onClick函数之外重新分配变量。我已经测试了下面的代码，它对我有用，我承认这可能不是每次重新分配所有变量的完美解决方案，也许您可以将某些变量放在RegEx语句之类的全局范围内。我还删除了循环，因为我认为您不需要遍历所有内容5次以进行检查。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="inputName">Name</label>
        <input type="text" class="form-control" id="inputName" placeholder="Enter name">
    </div>
    <div class="form-group">
        <label for="inputName">Age</label>
        <input type="text" class="form-control" id="inputAge" placeholder="Enter age">
    </div>
    <div class="form-group">
        <label for="inputCity">City</label>
        <input type="text" class="form-control" id="inputCity" placeholder="Enter city">
    </div>
    <div class="form-group">
        <label for="InputEmail">Email address</label>
        <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="Enter email">
        <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
    </div>
    <div class="form-group">
        <label for="inputPhone">Phone number</label>
        <input type="phone" class="form-control" id="inputPhone" placeholder="Phone number">
    </div>
    <button type="button" class="btn btn-primary submit">Submit</button>
    <button type="button" class="btn btn-primary erase">Erase</button>
</form>

<script>
        $(".btn.btn-primary.submit").click(function () {
            let name_cityRegex = /^[a-zA-Z]+$/;
            let emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
            let age_phoneRegex = /^\d+$/;
            let nameValue = $('#inputName').val();
            let cityValue = $('#inputCity').val();
            let ageValue = $('#inputAge').val();
            let phoneValue = $('#inputPhone').val();
            let nameResult = name_cityRegex.test(nameValue);
            let cityResult = name_cityRegex.test(cityValue);
            let ageResult = age_phoneRegex.test(ageValue);
            let phoneResult = age_phoneRegex.test(phoneValue);
            let mailValue = $('#InputEmail').val();
            let mailResult = emailRegex.test(mailValue);
                if (nameValue == '' || cityValue == '' || ageValue == '' || phoneValue == '' || mailValue == '') {
                    $('.alert.alert-danger').show();
                }
                else if (nameResult === false || cityResult === false) {
                    $('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
                    $('.alert.alert-danger').show();
                    return false;
                }
                else if (ageResult == false || phoneResult == false) {
                    $('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
                    $('.alert.alert-danger').show();
                    return false;
                }
                else if (mailResult == false) {
                    $('.alert.alert-danger').text("Please enter a valid email adress");
                    $('.alert.alert-danger').show();
                    return false
                }
                return true;
            // })
        });

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

Answer 3

您有一个语法错误，我已更正了以下代码。

function validateForm() {
    var name_cityRegex = /^[a-zA-Z]+$/;
    var emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    var age_phoneRegex = /^\d+$/;
    var nameValue = $('#inputName').val();
    var cityValue = $('#inputCity').val();
    var ageValue = $('#inputAge').val();
    var phoneValue = $('#inputPhone').val();
    var nameResult = name_cityRegex.test(nameValue);
    var cityResult = name_cityRegex.test(cityValue);
    var ageResult = age_phoneRegex.test(ageValue);
    var phoneResult = age_phoneRegex.test(phoneValue);
    var mailValue = $('#InputEmail1').val();
    var mailResult = emailRegex.test(mailValue);
    
    $('.form-control').each(function () {
        if ($(this).val() == "") {
            $('.alert.alert-danger').show();
        }
        else if (nameResult == false || cityResult == false) {
            $('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
            $('.alert.alert-danger').show();
            return false;
        }
        else if (ageResult == false || phoneResult == false) {
            $('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
            $('.alert.alert-danger').show();
            return false;
        }
        else if (mailResult == false) {
            $('.alert.alert-danger').text("Please enter a valid email adress");
            $('.alert.alert-danger').show();
            return false
        }
        return true;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="inputName">Name</label>
    <input type="text" name="name" class="form-control" id="inputName" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label for="inputName">Age</label>
    <input type="text" name="age" class="form-control" id="inputAge" placeholder="Enter age">
  </div>
  <div class="form-group">
    <label for="inputCity">City</label>
    <input type="text" name="city" class="form-control" id="inputCity" placeholder="Enter city">
  </div>
  <div class="form-group">
    <label for="InputEmail1">Email address</label>
    <input type="text" name="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
   
  </div>
  <div class="form-group">
    <label for="inputPhone">Phone number</label>
    <input type="text" name="phone" class="form-control" id="inputPhone" placeholder="Phone number">
  </div>
  <button type="button" class="btn btn-primary submit" onClick="validateForm()">Submit</button>
  <button type="button" class="btn btn-primary erase">Erase</button>
</form>

如何使此表单验证脚本正常工作

3 个答案: