jQuery 表單驗證 學習手記
一、 Validation Plug使用方法
例子:
二、 基本驗證方法
-
required 必填選項 required:true,代表該輸入框必填
-
remote 遠端校驗
remote:{
url:"remote.json", //遠端校驗地址
type:'post', //校驗型別
data:{
loginTime:function(){
return +new Date
}
}
} -
minlength 最小長度 minlength:2, 最小長度2字元
-
maxlength 最大長度
-
rangelength 長度範圍 rangelength:[2,10],長度範圍在2到10字元之間
-
min最小值 最小值 min:2 輸入一個值,值的最小值為2
-
max最大值
-
range值範圍
-
email Email格式 輸入Email
-
url URL格式 輸入URL,以https://或http://開頭
-
data 日期
-
dataISO 標準日期格式
-
number 數字 輸入一個數字
-
digits 整數 輸入一個正整數
- equalTO 與另一個元素值相等 equalTo:”#password” 與name屬性為password的元素的輸入值相同
三、 高階方法 - 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})
- 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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jquery.validate 表單驗證jQuery
- jQuery表單驗證效果詳解jQuery
- 實戰表單驗證學習
- 利用jQuery實現表單驗證功能jQuery
- jQuery Validate表單驗證基本流程介紹jQuery
- Ajax 學習手記 Jquery實現jQuery
- jQuery Validate表單驗證(使用者註冊簡單應用)jQuery
- 基於Bootstrap的強大jQuery表單驗證外掛bootjQuery
- antd4表單手機號驗證
- JQuery表單驗證(包括:使用者名稱,手機號,密碼,確認密碼,驗證碼60s)jQuery密碼
- Laravel 表單驗證Laravel
- javascript表單驗證JavaScript
- bootstrap表單驗證boot
- bootstrapValidator 表單驗證boot
- JavaScript 表單驗證JavaScript
- antd 表單驗證
- Laravel——驗證碼認證學習記錄Laravel
- jQuery Validate對select下拉選單驗證jQuery
- element表單驗證如何合理清除標記
- 表單required 必需驗證UI
- HTML 表單驗證概述HTML
- 表單資料驗證
- 表單驗證 regex:pattern
- 輸入表單驗證
- 路由表單驗證路由
- jQuery學習筆記jQuery筆記
- jQuery 學習筆記jQuery筆記
- JQuery學習記錄jQuery
- angularjs學習第五天筆記(第二篇:表單驗證升級篇)AngularJS筆記
- swoft 學習筆記之驗證器筆記
- Vue-手動清空Form表單的驗證及驗證提示(紅字提示)VueORM
- vue表單驗證你真的會了嗎?元件之表單驗證(form)validateVue元件ORM
- jQuery Validate自定義表單元素驗證通過和不通過的樣式jQuery
- 開發中遇到的jquery函式應用和表單驗證處理jQuery函式
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- validate表單驗證外掛
- Lumen 仿 Laravel 表單驗證Laravel
- 前端表單驗證的目的前端