手机号js验证 & 后端正则验证
Laiyong Wang Lv6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//标签失焦时,验证输入的手机号是否为 1 开头的十一位数字,错误则新增标签提示
$("#phone")[0].onblur=function(){
var reg=/^[1][0-9]{10}$/;
if (!reg.test(this.value)) {
if($("#phone-check").length==0){
var node = this.parentNode.childNodes;
var elem = document.createElement("p");
elem.id = "phone-check";
elem.class = "help-block";
elem.setAttribute("style", "color:#d9534f;margin-top:2px;margin-bottom:0px;font-size: 12px;");
elem.innerHTML = "手机号必须为 1 开头的十一位数字";
this.parentNode.appendChild(elem);
}
} else {
$("#phone-check").remove();
}
}
//将非数字替换成空并限制最多输入十一位
$("#phone")[0].oninput=function(){
this.value = this.value.slice(0,11);
this.value = this.value.replace(/[^\d]/g,"");
}


$li-margin-bottom = 0.8rem $post-tool-button-width = 2.5rem .post-tools-container { padding-top var(--component-gap) .post-tools-list { li { margin-bottom $li-margin-bottom &:last-child { margin-bottom 0 } } li.tools-item { position relative box-sizing border-box width $post-tool-button-width height $post-tool-button-width color var(--text-color-3) font-size 1.2rem background var(--background-color-1) border-radius 50% box-shadow 2px 2px 5px var(--shadow-color) cursor pointer &:hover { box-shadow 2px 2px 8px var(--shadow-hover-color) } i { color var(--text-color-3) } &:hover { color var(--background-color-1) background var(--primary-color) i { color var(--background-color-1) !important } } &.toggle-show-toc { display none } &.go-to-comments { .post-comments-count { position absolute top 0 right -1rem display none align-items center justify-content center box-sizing border-box min-width 1.1rem height 1.1rem padding 0 0.2rem color var(--badge-color) font-size 12px background var(--badge-background-color) border-radius 0.4rem +keep-tablet() { display none !important } } } } li.status-item { width $post-tool-button-width height $post-tool-button-width color var(--text-color-3) font-size 1.6rem cursor pointer &.post-lock { cursor default .fa-lock-open { display none color var(--keep-success-color) } &.decrypt { cursor pointer .fa-lock-open { display block } .fa-lock { display none } } } } } }