[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學習五-表單驗證