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中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
WebPack基础知识详解
Jan 16 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python实现清屏的方法
2015/04/30 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python字典DICT类型合并详解
2017/08/17 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
数控技术应届生求职信
2013/11/13 职场文书
初三学习决心书
2014/03/11 职场文书
2014年预算员工作总结
2014/12/05 职场文书
租赁协议书
2015/01/27 职场文书
荆州古城导游词
2015/02/06 职场文书
校长新学期寄语2016
2015/12/04 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Python中异常处理用法
2021/11/27 Python