Jquery Easyui验证组件ValidateBox使用详解(20)


Posted in Javascript onDecember 18, 2016

本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下

加载方式

Class加载

<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />

JS调用加载

<input id="email" />
  <script>
    $(function () {
      $('#email').validatebox({
        required : true,
        validType : 'email',
      });
    });
  </script>

属性列表

Jquery Easyui验证组件ValidateBox使用详解(20)

//属性设置
$('#email').validatebox({
required : true,
validType : 'email',
//validType : 'url',
//validType : 'length[2,20]',
//validType : ['email', 'length[10,20]'],
//validType : 'remote["content.php", "username"]',
//delay : 3000,
missingMessage : '请填写电子邮件',
invalidMessage : '电子邮件格式不正确',
tipPosition : 'right',
deltaY : 120,
novalidate : true,
});

//Ajax 远程验证
if ($_POST['username'] == 'Lee') {
    echo 'true';
} else {
    echo 'false';
}

方法列表

Jquery Easyui验证组件ValidateBox使用详解(20)

//销毁组件
$('#email').validatebox('destroy');
//验证码文本框是否有效
 console.log($('#email').validatebox('validate'));
//返回验证的结果
console.log($('#email').validatebox('isValid'));
//禁用和启用
$('#email').validatebox('disableValidation');
$('#email').validatebox('enableValidation');
//可以使用$.fn.validatebox.defaults 重写默认值对象。

自定义验证

//新增一个规则
$.extend($.fn.validatebox.defaults.rules, {
   minLength : {
   validator : function (value, param) {
   return value.length >= param[0];
   },
   message : '请长度不小于{0}的字符',
   },
});
//调用
$('#email').validatebox({
  required : true,
  validType : 'minLength[5]',
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
详解Vue底部导航栏组件
May 02 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 #Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 #Javascript
前端js弹出框组件使用方法
Aug 24 #Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 #Javascript
教你一步步用jQyery实现轮播器
Dec 18 #Javascript
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
You might like
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php中socket通信机制实例详解
2015/01/03 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
js判断样式className同时增加class或删除class
2013/01/30 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
车间副主任岗位职责
2013/12/24 职场文书
2015年采购员工作总结
2015/04/27 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android