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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
Python yield 小结和实例
2014/04/25 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
关于python多重赋值的小问题
2019/04/17 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
医学院四年学习生活的自我评价
2013/11/06 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
三孔导游词
2015/02/05 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis