1. 程式人生 > >JQuery中內容操作函數、validation表單校驗

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

調用方法 scrip 註意 語言 rul asc javascrip 最前面插入 獲取

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