关于js输入框检测手机号码并显示提示信息

jade:

Paste_Image.png

css:

Paste_Image.png

js:

Paste_Image.png

效果：

Paste_Image.png Paste_Image.png

在上面的基础上

Paste_Image.png

输入正确

Paste_Image.png

只能用于简单的前端手机验证，真正的手机号存在与否还是要在后台验证的。
这里有个问题，就是如果当前页面是普通文档流，那么，新增元素将会占位，从而撑开页面，这点需要注意，可能在普通文档流中造成页面元素跑位的情况，要么提前预留出这个位置，要么就是对其进行定位，总之这个问题在真实的项目开发中注意一下。

下面贴上Js代码：

$('#submit').on('click',function () {
    /*首先得到输入的手机号码*/
    $('#message').text('');
   var phone = $('#phone').val();
    $('#phone').after('<p id="message"></p>');
    $('#message').text(getMessage(phone));

    /*用于检验手机号码*/
    function getMessage(phone){
        var message = "";
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})||(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (phone == ''|| phone == undefined) {
            message = "手机号码不能为空！";
        } else if (phone.length != 11) {
            message = "请输入正确的手机位数！";
        } else if (!myreg.test(phone)) {
            message = "请输入有效的手机号码！";
        }
        return message;
    }
});