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 Firefox与IE 替换节点的方法
Feb 24 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
angularJS中router的使用指南
Feb 09 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 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中extract()函数的定义和用法
2012/08/17 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python版名片管理系统
2018/11/30 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python----数据预处理代码实例
2019/03/20 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
金宝贝童装官网:Gymboree
2016/08/31 全球购物
运动会广播稿50字
2014/01/26 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL