Jquery Easyui验证组件ValidateBox使用详解（20）

本文实例为大家分享了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>

属性列表

//属性设置
$('#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';
}

方法列表

//销毁组件
$('#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]',
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • easyui关于validatebox实现多重规则验证的方法(必看)

    easyui关于validatebox实现多重规则验证的方法(必看)

    方法一: 自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: <input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']"> 方法二:(不太好用,试了半天还是不显示第二个验证的消息) 对于1.5版本的easyui.min,注释掉以下代码: 然后再添加 $.extend($.fn.validateb

  • jQuery插件EasyUI校验规则 validatebox验证框

    Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较

  • jquery easyui validatebox remote的使用详解

    validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options

  • easyui validatebox验证

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script> <script src="easyui1.2.4/jquery.easyui.min.js" type="te

  • jQuery EasyUI之验证框validatebox实例详解

    jQuery EasyUI之验证框validatebox实例详解

    1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>

  • Jquery Easyui验证组件ValidateBox使用详解（20）

    Jquery Easyui验证组件ValidateBox使用详解（20）

    本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /> JS调用加载 <input id="email" /> <script> $(func

  • Jquery Easyui选项卡组件Tab使用详解（10）

    Jquery Easyui选项卡组件Tab使用详解（10）

    本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title=&q

  • Jquery Easyui菜单组件Menu使用详解（15）

    Jquery Easyui菜单组件Menu使用详解（15）

    本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下 加载方式 菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件.然后,再通过 JS 事件部分再响应. <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span> <!--二次菜单--&

  • Jquery Easyui日历组件Calender使用详解（23）

    Jquery Easyui日历组件Calender使用详解（23）

    本文实例为大家分享了Jquery Easyui日历组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div> JS调用加载 <div id="box"></div> <script> $(function

  • Jquery Easyui对话框组件Dialog使用详解（14）

    Jquery Easyui对话框组件Dialog使用详解（14）

    Dialog对话框组件依赖于Window(窗口)组件.linkbutton 组件 加载方式 Class加载 <div class="easyui-dialog" title="弹出框" data-options="iconCls:'icon-add',resizable:true,modal:true" style="width: 400px;height: 200px;"> 弹出框内容 </div>

  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

  • 基于jQuery.Validate验证库知识点的详解

    1.如果设置了errorContainer.errorLabelContainer.wrapper,则errorPlacement不起作用 复制代码 代码如下: ...  $(document).ready(function(){    $("#myform").validate({       errorContainer: "#messageBox1, #messageBox2",       errorLabelContainer: "#messag

  • 使用jQuery,Angular实现登录界面验证码详解

    使用jQuery,Angular实现登录界面验证码详解

    写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波. 最终实现的效果: 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作. 整体思路. 1.取四位随机数 2.赋值到验证码的input框里.

  • jQuery正则表达式的使用方法步骤详解

    jQuery正则表达式的使用方法步骤详解

    本文主要和大家分享的就是jQuery学习中正则的使用,正则在jquery里面并没有比JavaScript多哪些知识,基本上是一样的,只是选择器更好了一点,一起来看看吧. 基础正则 1.正则表达式的创建 a) var checkNum = /^[A-Za-z0-9]+$/; b) var re=new RegExp("["+s1+"]","g"); 2.常用规则 a) 用户密码:/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/ b) 邮

随机推荐