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学习笔记4 Eval函数
Jan 11 Javascript
Js切换功能的简单方法
Nov 23 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
element中table高度自适应的实现
Oct 21 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 分页类 扩展代码
2009/06/11 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django数据库迁移常见使用方法
2020/11/12 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
如何写出好的Java代码
2014/04/25 面试题
最新教师自我评价分享
2013/11/12 职场文书
初中生自我评价
2014/02/01 职场文书
初中同学聚会感言
2014/02/11 职场文书
三查三看党性分析材料
2014/02/18 职场文书
少年闰土教学反思
2014/02/22 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
护理专业自荐书
2014/06/04 职场文书
银行求职自荐信
2014/06/30 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
python Polars库的使用简介
2021/04/21 Python