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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
分页栏的web标准实现
Nov 01 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
微信小程序排坑指南详解
May 23 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Vue数据绑定简析小结
May 07 Javascript
js脚本中执行java后台代码方法解析
Oct 11 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服务器实现多session并发运行
2006/10/09 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
php学习之function的用法
2012/07/14 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
Convert Seconds To Hours
2007/06/16 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
js自定义事件代码说明
2011/01/31 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue v-model的用法解析
2020/10/19 Javascript
django批量导入xml数据
2016/10/16 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
详解【python】str与json类型转换
2019/04/29 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python解析json代码实例解析
2019/11/25 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
校园活动策划书范文
2014/01/10 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
行政专员的岗位职责
2014/03/10 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2016年端午节寄语
2015/12/04 职场文书