Question

在我的Web应用程序中，我想将文本框的值插入到我的数据库中 - 但首先，验证所有字段都已填充。

目前，我的代码依赖于大量if {}条件，我想让它更优雅。这是我到目前为止所做的：

$(function () {
    $('#BtnInquiryPageSave').click(function () {
        if ($("#TbFirstName").val().toLowerCase() == "") {
            $('#TbFirstName').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }

        if ($("#TbRequestedCharterDate").val().toLowerCase() == "") {
            $('#TbRequestedCharterDate').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#TbEndDate").val().toLowerCase() == "") {
            $('#TbEndDate').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlPersons").val().toLowerCase() == "-1") {
            $('#ddlPersons').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlCabin").val().toLowerCase() == "-1") {
            $('#ddlCabin').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlBoatSize").val().toLowerCase() == "-1") {
            $('#ddlBoatSize').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ContentPlaceHolder2_ContentPlaceHolder4_ddlBoatType").val().toLowerCase() == "-1") {
            $('#ContentPlaceHolder2_ContentPlaceHolder4_ddlBoatType')
                .addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ContentPlaceHolder2_ContentPlaceHolder4_ddlSource").val().toLowerCase() == "-1") {
            $('#ContentPlaceHolder2_ContentPlaceHolder4_ddlSource')
                .addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#TbOther").val().toLowerCase() == "") {
            $('#TbOther').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
    });
});

我真的想要一种更简单的方法来测试所有这些条件。理想情况下，单个if / else或同样容易的东西。我只需要能够点击submit并让它验证...如果失败 - 显示失败消息，如果成功 - 将数据发送到数据库。

可能有什么更好的方法？

Answer 1

为什么不使用更稳定的jQuery验证插件来实现您的目标？例如： http://jquery.bassistance.de/validate/demo/

Answer 2

我建议使用Jquery Validator插件：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

这很简单，初始化为$（'＃formToValidate'）。validate（）;

在表单上的字段中，添加以下类：

<form action="" id="formToValidate">
<input type="text" name="name" id="name" class="required" />
</form>

更多信息：http://docs.jquery.com/Plugins/Validation

Answer 3

您可以尝试：http://jsfiddle.net/B8yQs/

$('form').submit(function (e) {

   $(':text').each(function () {
       if ($(this).val() == '') {
        $(this).css({
            'border': 'solid 1px red',
             'color': 'red'
        }).val('required.');
       e.preventDefault(); // stops the form from submit
      }
    $(this).focus(function () {
        $(this).css({
            'border': 'solid 1px black',
             'color': 'grey'
           }).val('');
        });
      });
});

您也可以根据自己的情况尝试这一点，但几乎没有修改：

$('form').submit(function (e) {

   $(':text').each(function () {
       if ($(this).val() == '') {
        $(this).addClass('RequiredField');
        $(this).next('.ErrorLable').css('visibility', 'visible');
        //------------^^^^^^^^^^^------------------------use class instead of ids
       e.preventDefault(); // stops the form from submit
      }
    $(this).focus(function () {
        $(this).removeClass('RequiredField');
        $(this).next('.ErrorLable').css('visibility', 'hidden');
        });
      });
});

jquery验证文本框，然后在sql server中提交代码

3 个答案: