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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
桌面中心(一)创建数据库
2006/10/09 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP实现事件机制的方法
2015/07/10 PHP
php时间函数用法分析
2016/05/28 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
取选中的radio的值
2010/01/11 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python使用wxPython实现计算器
2018/01/30 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Django使用rest_framework写出API
2020/05/21 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
团日活动总结怎么写
2014/06/25 职场文书
2014年路政工作总结
2014/12/10 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS