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