jQuery EasyUI 表單插件– Validatebox 驗證框
通過$.fn.validatebox.defaults 重寫默認的defaults。
驗證框(validatebox)是為了驗證表單輸入字段而設計的。 如果用戶輸入無效的值,它將改變背景顏色,顯示警告圖標和提示消息。 驗證框(validatebox)可與表單(form)插件集成,防止提交無效的字段。
依賴
- tooltip
用法
從標記創建驗證框(validatebox)。
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">
使用javascript 創建驗證框(validatebox)。
<input id="vv">
$('#vv').validatebox({ required: true, validType: 'email' });
檢查密碼和重新輸入密碼是相同的。
// extend the 'equals' rule $.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: 'Field do not match.' } });
<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"> <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']">
驗證規則
驗證規則是通過使用required 和validType 屬性來定義的,這裡是已經實施的規則:
- email:匹配email 正則表達式規則。
- url:匹配URL 正則表達式規則。
- length[0,100]:允許從x 到y 個字符。
- remote['http://.../action.do','paramName']:發送ajax 請求來驗證值,成功時返回'true' 。
要自定義驗證規則,重寫$.fn.validatebox.defaults.rules,來定義一個驗證函數和無效的信息。 例如,定義一個minLength 驗證類型:
$.extend($.fn.validatebox.defaults.rules, { minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: 'Please enter at least {0} characters.' } });
現在您可以使用這個minLength 驗證類型來定義一個至少輸入5個字符的輸入框:
<input class="easyui-validatebox" data-options="validType:'minLength[5]'">
屬性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
required | boolean | 定义是否字段应被输入。 | false |
validType | string,array | 定义字段的验证类型,比如 email、url,等等。可能的值: 1、验证类型字符串,应用单个验证规则。 2、验证类型数组,应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。 代码实例: <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] "> |
null |
delay | number | 延迟验证最后的输入值。该属性自版本 1.3.2 起可用。 | 200 |
missingMessage | string | 当文本框为空时出现的提示文本。 | 该字段是必需的。 |
invalidMessage | string | 当文本框的内容无效时出现的提示文本。 | null |
tipPosition | string | 定义当文本框的内容无效时提示消息的位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。 | right |
deltaX | number | 在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。 | 0 |
novalidate | boolean | 当设置为 true 时,则禁用验证。该属性自版本 1.3.4 起可用。 | false |
方法
名称 | 参数 | 描述 |
---|---|---|
destroy | none | 移除并销毁该组件。 |
validate | none | 进行验证以判定文本框的内容是否有效。 |
isValid | none | 调用 validate 方法并且返回验证结果,true 或者 false。 |
enableValidation | none | 启用验证。该方法自版本 1.3.4 起可用。 |
disableValidation | none | 禁用验证。该方法自版本 1.3.4 起可用。 |
jQuery EasyUI插件