验证并附加电话输入 Jquery

Validate and append phone input Jquery

本文关键字：输入 Jquery 电话 验证      更新时间：2023-09-26

我有一些输入字段，输入中总是必须有+第一个

.HTML 

<input id="phone">

.JS

  $("#phone").keydown(function (e) {
      $(this).get(0).value+="+";
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

问题是你可以在这把小提琴中看到http://fiddle.jshell.net/nqkeuspf/

更新

$("#phone").keydown(function (e) {
          var firstChar = $(this).val().substr(0, 1);
        // Check first character.
        if (firstChar != '+'){       
          $(this).val('+' + $(this).val())
        }   
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190,107]) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

问题是它不检查+

小提琴http://fiddle.jshell.net/bjsrk83j/3/

将其添加为keypress处理程序。它只允许数字，您可以为其提供filter以允许其他字符，如 +。Esc 允许用户取消。

function escapeRegExp(str) {
    return str.replace(/['-'[']'/'{'}'(')'*'+'?'.'''^'$'|]/g, "''$&");
}
function handleInputKey(filter, e) // append filter as string '+-.,' for example.
{
    if (!e) {
        var e = window.event;
    }
    //allow only numeric input
    //48-57 and 96-105 (keyboard left and numpad)
    //also delete, back space, esc, enter, arrows and tab
    if ((filter && filter.match(escapeRegExp(String.fromCharCode(e.which)))) || ((e.keyCode >= 48 && e.keyCode <= 57) && (!e.shiftKey && !e.altKey && !e.ctrlKey))) {
        return true;
    } else {
        e.preventDefault();
        return false;
    }

}
//the onkeydown handler   
function handleInputKeyFinish(e) {
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode == 27) {
        this.blur();
    }

}
function stripAndAppendPlus(e) {
    //when the users pastes a value delete invalid characters.
    e.target.value = e.target.value.replace(/[^0-9]/g, "");
    e.target.value = "+" + e.target.value;
}

$("#phone").keydown(handleInputKeyFinish);
$("#phone").keypress(handleInputKey.bind($("#phone")[0], null));
$("#phone").blur(stripAndAppendPlus);

小提琴中的解决方案：http://fiddle.jshell.net/bqa87bwh/1/

不使用jQuery或JavaScript更简单。这是HTML5，因此与旧版浏览器不兼容。

<input type="phone" pattern="^'+?'d{7,13}$" required />

pattern根据注册 ex 检查输入。此 reg ex 允许由 7 到 13 个号码组成的电话号码，它们可以以 + 开头。

required -->此字段必须包含一个值，否则不会提交表单。

小提琴中的解决方案：http://fiddle.jshell.net/e76t41rj/1/

相关文章：