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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 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作为网站开发语言的原因分享
2012/01/03 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
TensorFlow损失函数专题详解
2018/04/26 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python字符串判断密码强弱
2020/03/18 Python
Python同时处理多个异常的方法
2020/07/28 Python
了解一下python内建模块collections
2020/09/07 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
学习党章思想汇报
2014/01/07 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
python如何正确使用yield
2021/05/21 Python