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;
}
});
