[jQuery學習系列五 ]5-Jquery學習五-表單驗證
阿新 • • 發佈:2018-02-07
正則表達式 prevent 反選 mit 信息 只能輸入數字 event 正則表達 紅包
一,字段驗證:
1.1 字段非空
<form action="" method="post" id ="myform"> <p id="error">姓名不能為空!</p> <table> <tr> <td><label for="name">姓名:</label></td> <td><input type ="text" id = "name"></td> </tr> <tr> <td><input type ="submit" value="提交"></td> </tr> </table> </form> $(document).ready(function () { $("#error").hide(); //隱藏報錯信息 $("#myform").submit(function () {//提交按鈕點擊 var data = $("#name").val(); var len = data.length; if (len < 1) { $("#error").show(); //顯示錯誤提示文本 return false; } else { $("#error").hide(); return true; } }); $("#name").focus(function(event) { $("p").hide(); }); });
1.2 驗證數字
<form action="" method="post" id ="myform"> <p id="error">請輸入數字!</p> <table> <tr> <td><label for="age">年齡:</label></td> <td><input type ="text" id = "age"></td> </tr> <tr> <td><input type ="submit" value="提交"></td> </tr> </table> </form> //方式一:利用鍵盤事件和鼠標事件限定只能輸入數字 //只能輸入數字,不包含小數點 <div class="line">紅包個數:<input type="text" name="packetNumber" value="5" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" maxlength="10">個</div> //可以輸入數字和小數點 <div class="line">總 金 額:<input type="text" name="money" value="5" onkeyup="if(isNaN(value))execCommand(‘undo‘)" onafterpaste="if(isNaN(value))execCommand(‘undo‘)" maxlength="10">元</div> //方式二:利用isNaN函數 $(document).ready(function () { $("#error").hide(); //隱藏報錯信息 $("#myform").submit(function () {//提交按鈕點擊 var data = $("#name").val(); if (isNaN(data)) { $("#error").show(); //顯示錯誤提示文本 event.preventDefault(); //取消事件的默認動作。阻止提交 } else { $("#error").hide(); } }); });
二,jQuery中的正則表達式
var checkNum = /^[A-Za-z0-9]+$/;
checkNum.test($(this).val());
網上已經有很多的關於這方面的例子,具體的我也不一一羅列了,用到了 就可以直接百度。
三,多選框驗證
<form name="form1" method="post" action=""> <input type="checkbox" id="all" name="all"> <input type="button" id="btn1" value="全選"> <input type="button" id="btn2" value="取消全選"> <input type="button" id="btn3" value="選中所有奇數"> <input type="button" id="btn4" value="反選"> <input type="button" id="btn5" value="獲得選中的所有值"> <br /> <input type="checkbox" name="checkbox" value="checkbox1">checkbox1 <input type="checkbox" name="checkbox" value="checkbox2">checkbox2 <input type="checkbox" name="checkbox" value="checkbox3">checkbox3 <input type="checkbox" name="checkbox" value="checkbox4">checkbox4 <input type="checkbox" name="checkbox" value="checkbox5">checkbox5 <input type="checkbox" name="checkbox" value="checkbox6">checkbox6 <input type="checkbox" name="checkbox" value="checkbox7">checkbox7 <input type="checkbox" name="checkbox" value="checkbox8">checkbox8 </form> $("document").ready(function(){ $("#all").click(function(){ if(this.checked){ $("input[name=‘checkbox‘]").each(function(){this.checked=true;}); $("#btn1").attr("value","反選"); }else{ $("input[name=‘checkbox‘]").each(function(){this.checked=false;}); $("#btn1").attr("value","全選"); } }); $("#btn1").click(function(){ $("[name=‘checkbox‘]").attr("checked",‘true‘);//全選 }); $("#btn2").click(function(){ $("[name=‘checkbox‘]").removeAttr("checked");//取消全選 }); $("#btn3").click(function(){ $("[name=‘checkbox‘]:even").attr("checked",‘true‘);//選中所有奇數 }); $("#btn4").click(function(){ $("[name=‘checkbox‘]").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); }else{ $(this).attr("checked",‘true‘); } }); }); $("#btn5").click(function(){ var str=""; //$("input:checkbox[name=‘checkbox‘]:checked").each(function(){//可以 $("[name=‘checkbox‘][checked]").each(function(){ str+=$(this).val()+"\r\n"; }); alert(str); }); });
效果如下圖:
這個地方仍然還是存在一些問題的, 大家能夠發現嗎? 這裏面的內容仍然需要不斷的去完善!
[jQuery學習系列五 ]5-Jquery學習五-表單驗證