JQuery中內容操作函數、validation表單校正

標籤：value   數字   require   代碼   over   maxlength   for   資料   客戶   

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表單校正