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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
使用express来代理服务的方法
Jun 21 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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代码的53条建议
2008/03/27 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php英文单词统计器
2016/06/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python实现字典依据value排序
2016/02/24 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python实现滑雪游戏
2020/02/22 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
What is EJB
2016/07/22 面试题
委托书怎样写
2014/08/30 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
团组织推优材料
2014/12/29 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android