jade:

css:

js:

效果：

在上面的基础上

输入正确

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

下面贴上Js代码：

$('#submit').on('click',function () {
    /*首先得到输入的手机号码*/
    $('#message').text('');
   var phone = $('#phone').val();
    $('#phone').after('
');
    $('#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;
}
});