Question

我尝试了一个用于检查空字段验证的html程序，但它不起作用？请帮我看看我的代码中的错误是什么？代码片段在下面..

我尝试了一个用于检查空字段验证的html程序，但它不起作用？

   <!DOCTYPE html>
<html lang="en">
  <head>
<style>
body
{
    padding: 10px;
    font-family:Calibri;
    font-size:12pt;
}

td
{
    padding:5px;
}
input
{
    font-family:Calibri;
    font-size:12pt;
}

span
{
    font-family:Calibri;
    font-size:9pt;
    color:red;
}

</style>    

  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

  </head>
  <body>
  <table>
<tr>
    <td>First Name:
    </td>
    <td><input type='text' id='txtFName' class="required"/ >
    </td>
</tr>
<tr>
    <td>Last Name:
    </td>
    <td><input type='text' id='txtLName' class="required"/ >
    </td>
</tr>
<tr>
    <td>Age:
    </td>
    <td><input type='text' id='txtAge'/ >
    </td>
</tr>
<tr>
    <td>Email:
    </td>
    <td><input type='text' id='txtEmail' class="required"/ >
    </td>
</tr>
<tr>
    <td colspan="2" style='text-align:center;'><input type="button" id="btnSubmit" value=" Submit ">
    </td>
</tr>
</table>

  </body>

</html>
  <script>
$(document).ready(function() {
    $('#btnSubmit').click(function(e)
     {
     alert("hai");
        var isValid = true;
        $('input[type="text"]').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false) 
            e.preventDefault();
        else 
            alert('Thank you for submitting');
    });
}); 
    </script>

Answer 1

在头标记中包含jQuery库并尝试。

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Answer 2

首先在插件之前添加Jquery库，然后检查fiddle。

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Answer 3

Web应用程序框架和工具日益变得越来越智能化，如果Web开发人员社区需要对框架/工具进行更改，这种更改已被广泛接受和普及，它将被采用并推出，所有这些工具都已成为如此很多网站开发人员今天友好，特别是Rails，jQuery等，现在你只需要谷歌你的愿望，你会发现一些可插入的，最小的设置/配置库等着你试试：）

所以在这种情况下只需google for html表单输入验证。

我尝试了一个html程序来检查空字段的验证，但它确实有效吗？

3 个答案: