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代码
Jun 27 Javascript
JS类的封装及实现代码
Dec 02 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 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
对javascript和select部件的结合运用
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php 常用的系统函数
2017/02/07 PHP
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python set内置函数的具体使用
2019/07/02 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
物流司机岗位职责
2013/12/28 职场文书
打架检讨书400字
2014/01/17 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
团干部培训方案
2014/06/03 职场文书
大型公益活动策划方案
2014/08/20 职场文书
实习工作表现评语
2014/12/31 职场文书
少先队中队工作总结
2015/08/14 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Javascript设计模式之原型模式详细
2021/10/05 Javascript