Question

在找到非常有用的建议和提示之后，我想出了这个片段。

我想检查表单字段是否已更改。如果为true，则在页面顶部显示带有工具提示的警报图标，如果为false或返回到字段默认值，则隐藏警报图标。使用这个脚本我可以完成它，但我想知道这是否是正确的方法，如果它可以改进。新手在这里:)）

除了已经制作的内容之外，我还想标记已更改的字段（例如：更改字段标签类）。

$(':input').on('keyup keydown blur change', function () {  
    var isDirty = false; 

    $(':input').each(function () {
        var $e = $(this);

        if($e.is(':input[type=radio]') && $e.prop('defaultChecked') != $e.prop('checked')) {
            isDirty = true;

        } else if($e.is('select') && !this.options[this.selectedIndex].defaultSelected) {
            isDirty = true;

        } else if($e.is(':input[type=text], :input[type=url], :input[type=email], textarea') && $e.prop('defaultValue') != $e.val()) {
            isDirty = true;
        }

        if(isDirty == true){    
            $("#toolbar-warning span").attr({
                'class': 'btn active hasTooltip icon-warning-2', 
                'data-original-title': 'has changes!'
            });

        } else {
            $("#toolbar-warning span").attr({
                'class': 'btn hasTooltip icon-warning-2', 
                'data-original-title': ''
            });                 
        } 

    })
});

Answer 1

由于你已经使用了jQuery，试试这个

1）要检查表单是否已更改，请使用.serialize（）：

var defaultForm = $unchangedForm.serialize();

function checkIfFormChanged($form) {
    if(defaultForm !== $form.serialize())
        return true;
    else
        return false;
    // You can also use a one-liner: return !(defaultForm !== $form.serialize())
}

2）要检查元素的默认值是否已更改，请在要检查的每个元素上添加change（）选择器;

// This applies only to all the input elements
// Save the default values of elements in an array. Do this for every input element

var defaultValue[$myElem.attr('id')] = $myElem.val();
// more here

$('input').change(function(){
    if(defaultValue[$(this).attr('id')] !== $(this).val()) // Value has changed
        $(this).addClass('changedClass');
    else 
        $(this).removeClass('changedClass');
});

Answer 2

试试这个（提示，根据需要修改）：

在任何用户互动之前

，设置表格

$('form input, form select, form textarea').each(function(){ this.backup = this.value; });
$('form').on('change keyup', 'input,select,textarea', function(){
   if (this.value !== this.backup)
   {
      this.backup = this.value;
      this.form.isDirty = true;
      $(this).addClass('field-dirty');
      $(this.form).addClass('form-dirty');
   }
});

注意您需要在某些用户互动后休息form.isDirty，或者用户点击重置按钮，例如

$('form').on('click', '[type="reset"]', function(){
   $('form input, form select, form textarea').each(function(){ this.backup = this.value; this.form.isDirty = false; });
});

jQuery检查HTML表单是否已更改

2 个答案: