jQuery - 函式遍歷及validation外掛使用(表單校驗).
1.屬性操作: val , text , html
val( ): 獲取value屬性的值.
val(…): 給value屬性設定值.
text( ): 獲取文字內容 , 如有標籤 , 忽略不獲取.
text(…):設定文字內容 , 如有標籤 , 不進行解析 .
html( ): 獲取html屬性 , 如有標籤 , 一併獲取.
html(…):設定html屬性 , 如果有標籤 , 將進行解析.
注:
獲取都是獲取第一個.
設定是設定所有的.
2.函式遍歷: each
方式1:
$(“選擇器”).each( function( index , ele ){
index: 正在被遍歷的索引. 0開始.
ele == this: 正在被遍歷的dom元素.
});
方式2:
$.each($("選擇器") , function(index,ele){
});
3.文件操作:
內部插入:
a.append(b): 將B插入到A內部後面.
A.appendTo(B) : 將A插入到B內部後面
A.prepend(B): B插入到A內部前面.
A.prependTo(B) : A插入到B內部前面.
外部插入:
a.after(b) // a的後面插入b
a.before(b) // a的前面插入b
b.insertAfter(b) // a的後面插入b
b.insertBefore(b) // a的前面插入b
刪除元素:
remove // 移除 .
empty // 清空
4.validation外掛: 進行表單校驗.
外掛: 將封裝好的一些js方法 ,解決某一個特定的應用. (表單) 匯入:
1.匯入jquery庫 ,
2.匯入validation庫 ,
3.國際化資源庫(可導可不導)
使用前提:
頁面載入成功 - > 使用選擇器選中校驗的表單
需要手動呼叫validate()方法!
$("選擇器").validate({
rules:{
name屬性值:規則名,
...
},
messages:{
name屬性值:"提示資訊",
...
}
});
5.自定義校驗.
$.validater.addMethod( name , function( value , ele , params ) , msg );
name:規則名 唯一不重複
fn:
function(value,ele,params){
value:代表當校驗開始執行的時候 輸入框的值
ele:代表當校驗開始執行的時候 輸入框物件
params:你使用該自定義規則的時候 傳規則引數
}
//編寫校驗規則
//必須有一個bool返回值
msg:預設錯誤提示資訊
01_省市聯動案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 定義二維陣列:
var arr = new Array(4);
arr[0] = new Array("哈爾濱","齊齊哈爾","大慶","佳木斯");
arr[1] = new Array("長春市","吉林市","四平市","通化市");
arr[2] = new Array("瀋陽市","錦州市","大連市","鐵嶺市");
arr[3] = new Array("鄭州市","洛陽市","安陽市","南陽市");
// 頁面載入事件 .
$(function(){
// 選項值 發生變化.
$("[name='pro']").change(function(){
// alert(this.value)
// 找到對應城市的陣列.
var arrays = arr[$(this).val()];
// 初始化值 .
$("[name='city']").html("<option >-請選擇-</option>")
// 遍歷陣列.
$(arrays).each(function(){
// alert(this)
var name = this;
var option ="<option>"+name+"</option>";
$("[name='city']").append(option);
})
})
})
</script>
<body>
<form action="#" method="get">
籍貫:
<select name="pro">
<option >-請選擇-</option>
<option value="0">黑龍江</option>
<option value="1">吉林</option>
<option value="2">遼寧</option>
<option value="3">河南</option>
</select>
<select name="city">
<option >-請選擇-</option>
</select>
<br>
<input type="submit" value="儲存"/>
<input type="reset" />
<input type="button" value="普通按鈕"/>
</form>
</body>
</html>
02_表單校驗案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單校驗</title>
</head>
<!-- 匯入js類庫 -->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!-- 匯入外掛庫 -->
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<style>
.error{
color: red;
}
</style>
<script>
$(function(){
$("#formid").validate({
rules:{
username:{
required:true,
rangelength:[2,6]
},
password:{
number:true,
rangelength:[2,6]
},
repassword:{
number:true,
equalTo:"[name='password']"
},email:{
required:true,
email:"email"
},sex:{
required:true
}
},
messages:{
username:{
required:"使用者名稱不能為空!",
rangelength:"長度必須在{0}~{1}之間"
},
password:{
number:"密碼只能為數字!",
rangelength:"密碼必須在{0}~{1}之間"
},
repassword:{
number:"密碼只能為數字!",
equalTo:"必須和密碼一致..."
},email:{
required:"郵箱不能為空!",
email:"格式不正確..."
},sex:{
required:"必選!"
}
}
});
})
</script>
<body>
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">會員註冊USER REGISTER</td>
</tr>
<tr>
<td width="20%">使用者名稱:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" />女
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>驗證碼</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="註冊" />
</td>
</tr>
</table>
</form>
</body>
</html>