?需求：輸入錯誤的手機(jī)號，會有提示語，正確的手機(jī)號碼會有正確的圖標(biāo)
??效果：
??思路：
??（1）排版（不細(xì)講），使用input 、button、span等標(biāo)簽，排版里面一個主要的小點(diǎn)是，需要寫出兩個span ，通過v-show先進(jìn)行隱藏，等后面判斷手機(jī)號碼的正確錯誤再進(jìn)行顯示與隱藏
??
??（2）接著，就需要在input 里設(shè)置@blur事件（當(dāng)元素失去焦點(diǎn)時js驗證手機(jī)號碼正則表達(dá)式，觸發(fā)的事件，就是鼠標(biāo)離開方框的時候）
??（3）然后，再使用js正則表達(dá)式，進(jìn)行手機(jī)號碼的校驗js驗證手機(jī)號碼正則表達(dá)式，使用這串代碼
??
?? let reg = /^1[0-9]{10}$/;文章來源：http://www.zghlxwxcb.cn/news/detail-710627.html
??（4）最后，在寫@blur事件的判斷方法的時候，當(dāng)不符合手機(jī)校驗規(guī)則時，就顯示“請輸入正確的手機(jī)號碼”的提示語，即系錯誤圖標(biāo)及提示語= true，然后else的時候（就是手機(jī)號碼為正確），要先把錯誤圖標(biāo)及提示語設(shè)置為false,然后正確圖標(biāo)設(shè)置為true
?? let reg = /^1[0-9]{10}$/;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
##登錄????????????????????????????????????????????????????????????????請輸入正確的手機(jī)號碼！
??????????????
?
????data() {
????????return?{
????????????phone:'',
????????????rightshow:false,?// 正確圖標(biāo)
????????????errshow:false,?//錯誤圖標(biāo)
????????}
????},
????methods: {
????????getphone() {
????????????let reg = /^1[0-9]{10}$/;?
????????????//正則表達(dá)式 ，1代表手機(jī)號的第一位1 ，[0-9]{10}代表后面10個數(shù)字，在0-9里面隨機(jī)
????????????if?(!reg.test(this.phone)) {?//！就代表當(dāng) 不符合這個規(guī)則，
????????????????????????????????????????!reg.test(this.phone)這個也是語法來的
????????????????this.errshow = true;
????????????????this.rightshow = false;
????????????}
????????????else?{
????????????????this.errshow = false;
????????????????this.rightshow = true;
????????????}
????????}
?
?
????h2 {
????font-size: 25px;
????color: red;
????margin-bottom: 20px;
}.signin {????width: 600px;
????margin: 50px auto;
}.signin input {????display: inline-block;
????width: 350px;
????margin-bottom: 20px;
????border-radius: .1rem;
}.signin button {????width: 350px;
????height:? 50px;
????}.signin-item {????position: relative;
}.signin-item .iconkekan {????position: absolute;
????right: 42%;
????padding-top: 20px;
????padding-right: 10px;
????font-size: 18px;
}.signin-item .iconkekan-hover {??color: #DA1A14;
} |
演示地址：https://www.clw9335.com/zx/index-htm-page-3.html文章來源地址http://www.zghlxwxcb.cn/news/detail-710627.html
到了這里，關(guān)于網(wǎng)站程序中手機(jī)號碼判斷方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
