使用jQuery验证电话号码长度不起作用

huangapple go评论59阅读模式
英文:

validate phone number length using jquery not working

问题

我正在尝试使用jQuery验证电话号码长度,在用户开始输入时显示,我做了以下代码:

    function validatePhone(phone) {
      if (phone.value.length <= 10 && phone.value.length >= 5) {
        let var = 'Yes';
        return var;
      } else {
        let var = 'No';
        return var;
      }
    }

    function validate() {
      let result1 = $("#result1");
      let phone = $("#phone").val();
      result1.text("");

      if (validatePhone(phone)) {
        result1.text(var);
        result1.css("color", "green");
      }
      return false;
    }
    jQuery(function($) {
      $("#phone").on("input", validate);
    });

<input type="number" class="form-control"  id="phone" name="phone">
<span class="label">Phone Number<span style="color:red">*</span> <span id="result1"></span></span>
英文:

i am trying to validate phone number length using jquery, when user start typing itself it should display, i did the following code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function validatePhone(phone) {
  if (phone.value.length &lt;= 10 &amp;&amp; phone.value.length &gt;= 5) {
    let
    var = &#39;Yes&#39;;
    return var;
  } else {
    let
    var = &#39;No&#39;;
    return var;
  }
}

function validate() {
  let result1 = $(&quot;#result1&quot;);
  let phone = $(&quot;#phone&quot;).val();
  result1.text(&quot;&quot;);


  if (validatePhone(phone)) {
    result1.text(var);
    result1.css(&quot;color&quot;, &quot;green&quot;);
  }
  return false;
}
jQuery(function($) {
  $(&quot;#phone&quot;).on(&quot;input&quot;, validate);
});

<!-- language: lang-html -->

&lt;input type=&quot;number&quot; class=&quot;form-control&quot;  id=&quot;phone&quot; name=&quot;phone&quot;&gt;
&lt;span class=&quot;label&quot;&gt;Phone Number&lt;span style=&quot;color:red&quot;&gt;*&lt;/span&gt; &lt;span id=&quot;result1&quot;&gt;&lt;/span&gt;&lt;/span&gt;

<!-- end snippet -->

however this doesnt work, can anyone please tell me what is wrong in here, thanks in advance

答案1

得分: 1

I cleaned up your code a bit, it was mostly ok but you had some small syntax errors and logic errors. Also I suggest using the label tag. The code can be written even shorter if you want!

function validatePhone(phone) {
  if (phone.length <= 10 && phone.length >= 5) {
    return true;
  } else {
    return false;
  }
}

function validate() {
  let result1 = $("#result1");
  let phone = $("#phone").val();
  result1.text("");

  if (validatePhone(phone)) {
    result1.text("great!");
    result1.css("color", "green");
  } else {
    result1.text("please input phone number");
    result1.css("color", "red");
  }
}

jQuery(function($) {
  $("#phone").on("input", validate);
});

HTML

<label for="phone">电话号码 <span style="color:red">*</span></label>
<input type="number" class="form-control" required id="phone" name="phone">
<span id="result1"></span>

I also suggest you take a look at the css:valid rule!
https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

英文:

I cleaned up your code a bit, it was mostly ok but you had some small syntax errors and logic errors. Also I suggest using the label tag. The code can be written even shorter if you want!

function validatePhone(phone) {
  if (phone.length &lt;= 10 &amp;&amp; phone.length &gt;= 5) {
    return true;
  } else {
    return false;
  }
}

function validate() {
  let result1 = $(&quot;#result1&quot;);
  let phone = $(&quot;#phone&quot;).val();
  result1.text(&quot;&quot;);


  if (validatePhone(phone)) {
    result1.text(&quot;great!&quot;);
    result1.css(&quot;color&quot;, &quot;green&quot;);
  } else {
    result1.text(&quot;please input phone number&quot;);
    result1.css(&quot;color&quot;, &quot;red&quot;);
  }
}

jQuery(function($) {
  $(&quot;#phone&quot;).on(&quot;input&quot;, validate);
});

HTML

&lt;label for=&quot;phone&quot;&gt;Phone Number &lt;span style=&quot;color:red&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;input type=&quot;number&quot; class=&quot;form-control&quot; required id=&quot;phone&quot; name=&quot;phone&quot;&gt;
&lt;span id=&quot;result1&quot;&gt;&lt;/span&gt;

I also suggest you take a look at the css:valid rule!
https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

huangapple
  • 本文由 发表于 2023年5月11日 16:57:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76225835.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定