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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58<divclass="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>此時頁面顯示效果如下：
-
