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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
基于python历史天气采集的分析
2019/02/14 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python如何实现机器人聊天
2020/09/10 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
社区健康教育实施方案
2014/03/18 职场文书
住房租房协议书
2014/08/20 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Python音乐爬虫完美绕过反爬
2021/08/30 Python