EasyUI中Validatebox验证框的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Validatebox验证框的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
屬性
| required | boolean | 定義是否字段應被輸入。 | false |
| validType | string,array | 定義字段的驗證類型，比如 email、url，等等?？赡艿闹?#xff1a; 1、驗證類型字符串，應用單個驗證規則。 2、驗證類型數組，應用多個驗證規則。單個字段上的多個驗證規則自版本 1.3.2 起可用。 代碼實例： | 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 起可用。 |
實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'"><br> <input id="vv1"><br> <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"><br> <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"required="required" validType="equals['#pwd']"><br><script type="text/javascript">$('#vv1').validatebox({required: true,validType: 'email'});$.extend($.fn.validatebox.defaults.rules, {equals: {validator: function(value,param){return value == $(param[0]).val();},message: '密碼不一致'}}); </script> </body> </html>?
總結
以上是生活随笔為你收集整理的EasyUI中Validatebox验证框的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库建模工具PowerDesigner
- 下一篇： EasyUI中Numberbox的简单使