input輸入框驗證的彈層優化
阿新 • • 發佈:2019-02-20
-
當一個頁面多個input需要使用者操作,例如問卷調查,使用者往往漏掉幾道題目,直接點選提交問卷,一般頁面會彈層提示問卷未完成,此時使用者需要自己找到哪些題沒寫。再重新輸入,如果有好幾道題目漏掉了,使用者不一定能一次將漏掉的題目找全,第二次點提交,彈層再次出現。。。這樣的體驗是非常差的。所以我們需要在使用者第一次提交的時候就告訴哪幾道題沒寫,程式碼思路如下:
?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 <div
class
=
"demo"
>
<li>
<h4>資訊
1
</h4>
<input type=
"text"
name=
"NAME"
placeholder=
"請輸入姓名"
/>
<input type=
"text"
name=
"TEL"
placeholder=
"請輸入電話號碼"
/>
<input type=
"text"
name=
"ADRESS"
placeholder=
"請輸入家庭住址"
/>
</li>
<li>
<h4>資訊
2
</h4>
<input type=
"text"
name=
"NAME"
placeholder=
"請輸入姓名"
/>
<input type=
"text"
name=
"TEL"
placeholder=
"請輸入電話號碼"
/>
<input type=
"text"
name=
"ADRESS"
placeholder=
"請輸入家庭住址"
/>
</li>
<li>
<h4>資訊
3
</h4>
<input type=
"text"
name=
"NAME"
placeholder=
"請輸入姓名"
/>
<input type=
"text"
name=
"TEL"
placeholder=
"請輸入電話號碼"
/>
<input type=
"text"
name=
"ADRESS"
placeholder=
"請輸入家庭住址"
/>
</li>
<a href=
"javascript:;"
>提交</a>
</div>
<script src=
"jquery-1.8.2.min.js"
></script>
<script>
$(
"a"
).click(function() {
var errorinfo =
""
;
$(
".demo li"
).each(function(index) {
var limessages =
""
;
if
($(
this
).find(
"input[name=NAME]"
).val() ==
""
) {
if
(limessages ==
""
) {
limessages +=
"資訊"
+ (index +
1
) +
":"
;
}
limessages +=
"姓名不能為空;"
}
if
($(
this
).find(
"input[name=TEL]"
).val() ==
""
) {
if
(limessages ==
""
) {
limessages +=
"資訊"
+ (index +
1
) +
":"
;
}
limessages +=
"電話不能為空;"
}
if
($(
this
).find(
"input[name=ADRESS]"
).val() ==
""
) {
if
(limessages ==
""
) {
limessages +=
"資訊"
+ (index +
1
) +
":"
;
}
limessages +=
"地址不能為空;"
}
if
(limessages !=
""
) {
errorinfo += limessages;
}
});
if
(errorinfo !=
""
) {
alert(errorinfo);
}
});
</script>
此時頁面顯示效果如下:
-