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 输入框内容格式验证代码
Feb 11 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
node.js中的console用法总结
Dec 15 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
学校后勤人员职责
2013/12/27 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
二年级学生评语大全
2014/04/23 职场文书
借款担保书范文
2014/05/13 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
大连星海广场导游词
2015/02/10 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
python读取mnist数据集方法案例详解
2021/09/04 Python