JQuery中內容操作函數、validation表單校驗
JQuery:
內容體拼接(可以直接拼接元素節點和內容節點)
JQuery實現:
方案1:A.append(B); == B.appendTo(A);A的後面拼接B
方案2: A.prepend(B); == B.prependTo(A);A文本的最前面插入B
text()與html()比較:
1.相同點:
都可以設置或獲取內容
2.不同點:
獲取時,html()獲取的是所有內容體:標簽+文本
text()獲取的只是文本
設置時,如果設置的內容有html()標簽
html()設置的內容可以被瀏覽器當做標簽解析
text()設置的所有內容都被當成了普通文本
3.二者用於場景
JS一般使用html()函數
類似於text()的實現一般用於xml解析
val():對表單中的value值進行操作
事件簡化:hover()
d1.hover(
function(){t1.val("第一個是移入事件")},
function(){t1.val("第二個是移出事件")}
);
validation是對表單校驗的封裝,是一個第三方的JQuery的插件,使用的時候先導入JQuery包(JQuery是一個插座)
表單校驗中涉及兩個要素:規則和提示信息
&(function(){
//定位表單,調用方法validate()進行校驗
$("#id").validate({
//規則,註意大括號和分號的使用
rules:{
//通過name屬性值定位標簽節點
username:{
//屬性:屬性值, 註意逗號,用逗號分隔,結尾處不用
required:true, //必填
rangelength:[6,10] //字符長度
}
},
//提示信息
messages:{
username:{
required:"這是必填項",
rangelength:"長度必須在6~10個字符之間"
}
}
});
});
其它校驗器:
email:{
email:true //必須符合郵箱格式
},
birthday:{
date:true, //必須符合日期格式
number:true, //必須是數字
min:1000, //最小值
range:[6,16], //必須是在這之間的數字
},
pwd:{
required:true
},
repwd:{
required:true,
equalTo:"input[name=‘pwd‘]" //值必須和名字為pwd的input標簽的value值相等
}
自定義校驗類型:
1.編寫校驗類型
$.validator.addMethod(參數1,參數2,參數3);
參數1:該校驗類型的名字
參數2:該校驗類型的具體實現
參數3:錯誤提示
2.參數2詳解,參數2返回一個boolean的值,返回false執行錯誤提示(參數3)
function(參數1,參數2,參數3)
參數1 ----- 客戶錄入的值
參數2 ----- 輸入項對應的對象
參數3 ----- 使用校驗類型時,校驗類型的取值
$.validator.addMethod("my",function(v,e,p){
//根據客戶錄入的數據進行校驗,判斷是不是合法的,如果合法,返回 true,否則返回 false
//判斷 v 中是不是有敏感詞(pujing)
if(v.indexOf("pujing") != -1){//有pujing
return false;
}
return true;
},"不能出現政治敏感詞");
$(function(){
$("#f1").validate({
rules:{
username:{
my:true
}
}
});
});
validation插件設置錯誤信息時的原理:(查看元素的方法:在網頁中查看)
內置的錯誤提示,格式:
<label id="" class="error" for="對應輸入項的name值">提示信息</lable>
看見內置的格式之後通過格式定位標簽元素改變其屬性等,在css代碼中修飾元素,在js中動態處理元素
通過標簽名得到元素: lable (標簽名選擇器)
通過class名得到元素: .error (class選擇器)
拓展:
怎麽讓錯誤提示換行
錯誤提示是默認生成的,緊跟在相應的input後面
在相應的位置,自己添加標簽 <label class="error" for="name值"></lable>自己添加之後系統不會自己添加
內置了一些錯誤提示,使用時,不需要編寫messages部分即可得到默認的
國際化:
相同軟件顯示不同的語言,內置語言包實現,dist文件中
<script type="text/javascript" src="../js/messages_es_PE.js" ></script>
可以自己在html中提供校驗:
1.在script中得到表單並提供校驗方法,沒有具體實現,自己在html中通過通過class提供具體的校驗器,要改提示信息同樣通過選擇器定位lable標簽
<input type="text" name="pwd" class="required number" />
2.直接在要校驗的標準中內置validation的屬性和屬性值:
<input type="text" name="username" required="true" minlength="2" maxlength="8" />
3.因為內置屬性不是html自己的屬性,所以提供自定義標簽標記
<input type="text" name="username" data-rule-required="true" data-rule-minlength="2" data-rule-maxlength="8" />
JQuery中內容操作函數、validation表單校驗