Question

所以我尝试为自己制作一个小验证工具，但问题是它只能在调用函数的同一页面上工作，除非它按预期工作。

＆＃XA;＆＃XA;

 <代码>＆LT;脚本＆GT;＆＃XA; function checkPhone（）{＆＃xA; var phone_ = document.getElementById（'phone_no'）。value;＆＃xA; var phonefn = phone_.charCodeAt（0）; ＆＃XA;＆＃XA; if（phone_.length＆gt; 0）{＆＃xA; if（phone_.length！= 11 || phonefn！= 48）{＆＃xA; $（ “＃phone_no”）removeClass（ 'input_style'）;＆＃XA; $（ “＃phone_no”）removeClass（ '有效'）;＆＃XA; $（ “＃phone_no”）removeClass（ '无效'）;＆＃XA;＆＃XA; $（ “＃phone_no”）addClass（ '无效'）;＆＃XA; } else {＆＃xA; $（ “＃phone_no”）removeClass（ 'input_style'）;＆＃XA; $（ “＃phone_no”）removeClass（ '有效'）;＆＃XA; $（ “＃phone_no”）removeClass（ '无效'）;＆＃XA;＆＃XA; $（ “＃phone_no”）addClass（ '有效'）;＆＃XA; }＆＃XA;＆＃XA; }否则{$（ “＃phone_no”）removeClass（ '有效'）; $（ “＃phone_no”）removeClass（ '无效'）;}}＆＃XA;＆LT; /脚本＆GT;＆＃XA;＆＃ xA;＆lt; form name =“form”id =“form”method =“POST”＆gt;＆＃xA; ＆lt; label＆gt;电话号码：＆lt; / label＆gt;＆＃xA; ＆lt; input id =“phone_no”class =“input_style”name =“phone_no”onBlur =“checkPhone（）”＆gt;＆lt; / input＆gt;＆＃xA;＆lt; / form＆gt;＆＃xA;  < / pre>＆＃xA;＆＃xA;   https://jsfiddle.net/3763886t/1/  ＆＃XA;

Answer 1

尝试在Javascript中而不是在HTML中绑定事件处理程序：

<form name="form" id="form" method="POST">
  <label>Phone Number:</label>
  <input id="phone_no" class="input_style" name="phone_no" />
</form>

<script language="javascript">
  function checkPhone() {
    var $phone = $(this);
    var phone_ = $phone.val();
    var phonefn = phone_.charCodeAt(0);

    if (phone_.length > 0) {
      if (phone_.length != 11 || phonefn != 48) {
        $phone.removeClass('input_style');
        $phone.removeClass('valid');
        $phone.removeClass('invalid');

        $phone.addClass('invalid');
      } else {
        $phone.removeClass('input_style');
        $phone.removeClass('valid');
        $phone.removeClass('invalid');

        $phone.addClass('valid');
      }

    } else {
      $phone.removeClass('valid');
      $phone.removeClass('invalid');
    }
  }

  $('#phone_no').on('blur', checkPhone);
</script>

Answer 2

不要在HTML中添加行为。直接使用javascript添加它。

使用Jquery ready函数附加事件处理程序。

Jquery允许添加或删除多个类并允许链式调用（流畅的api）：

function checkPhone() {
    var input = $(this);
    var phone_ = input.val();
    var phonefn = phone_.charCodeAt(0);

    if (phone_.length > 0) {
        if (phone_.length != 11 || phonefn != 48) {
            input.removeClass('input_style valid')
                .addClass('invalid');
        } else {
            input.removeClass('input_style invalid')
                .addClass('valid');
        }
    } else {
        input.removeClass('valid invalid');
    }
}

$(document).ready(function () {
    // Handler for .ready() called.
    $("#phone_no").on('blur', checkPhone);
});

更新的提琴手：https://jsfiddle.net/royto/kukre5vo/

JS仅适用于<script>标记，但不适用于外部文件

2 个答案: