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中的事件驱动
May 21 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
分类解析jQuery选择器
Nov 23 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
微信小程序实现日历效果
Dec 28 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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/21 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery验证插件 Validate详解
2014/11/20 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Vant picker 多级联动操作
2020/11/02 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python求离散序列导数的示例
2019/07/10 Python
基于python的列表list和集合set操作
2019/11/24 Python
python科学计算之narray对象用法
2019/11/25 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5进度条特效
2014/12/18 HTML / CSS
女大学生个人求职信
2013/12/09 职场文书
文明寝室标语
2014/06/13 职场文书
论语读书笔记
2015/06/26 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL