jQuery 表單驗證 學習手記

disable發表於2021-09-09

一、 Validation Plug使用方法
例子:





二、 基本驗證方法

  1. required 必填選項 required:true,代表該輸入框必填

  2. remote 遠端校驗
    remote:{
    url:"remote.json", //遠端校驗地址
    type:'post', //校驗型別
    data:{
    loginTime:function(){
    return +new Date
    }
    }
    }

  3. minlength 最小長度 minlength:2, 最小長度2字元

  4. maxlength 最大長度

  5. rangelength 長度範圍 rangelength:[2,10],長度範圍在2到10字元之間

  6. min最小值 最小值 min:2 輸入一個值,值的最小值為2

  7. max最大值

  8. range值範圍

  9. email Email格式 輸入Email

  10. url URL格式 輸入URL,以https://或http://開頭

  11. data 日期

  12. dataISO 標準日期格式

  13. number 數字 輸入一個數字

  14. digits 整數 輸入一個正整數

  15. equalTO 與另一個元素值相等 equalTo:”#password” 與name屬性為password的元素的輸入值相同 
    三、 高階方法
  16. valid()及rules()方法
    valid()方法,檢查表單
    例子
    $("#check").click(function(){
    alert($("#demoForm").valid() ? "填寫正確!":"填寫錯誤!")
    }) // 點選check按鈕。檢查id為demoForm的表單是否填寫正確,並彈出提示

rules()方法
rules() 獲取表單元素的校驗規則
$(“#username”).rules() // 獲取id名為username的元素的校驗規則

rules(“add”,rules) 增加校驗規則
$(“#username”).rules(“add”,{minlength:2,maxlength:10})

rules(“remove”,rules)刪除校驗規則
$(“#username”).rules(“remove”,{minlength:2,maxlength:10})

  1. validator方法
    validate方法返回validator物件,對返回的物件設定變數,變數名稱可設為validator。
    先在指令碼外設定變數 var validator;
    再在指令碼中 將validate方法返回的validator物件賦值給變數

validator.form() 驗證表單是否有效,返回true/false
validator.element(element) validator.element(“#username”),驗證某個元素是否有效
validator.resetForm() 把表單恢復到驗證前的狀態
validator.showErrors(errors) 提示錯誤資訊,不管輸入的對不對
validator.showErrors({
username:"你填錯了",
passowrd:"ahhaha"
})
validator.numberOfInvalids() 返回無效的元素的數量

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/200/viewspace-2798216/,如需轉載,請註明出處,否則將追究法律責任。

相關文章