EasyUI jQuery validateBox小工具

yizhihongxing

以下是关于 EasyUI jQuery validateBox 小工具的详细攻略:

EasyUI jQuery validateBox 小工具

validateBox 小工具是 EasyUI jQuery 中的一个小部件,用于验证用户输入的文本。它可以设置验证规则、提示信息、验证事件等属性,还可以自定义验证规则和提示信息。

语法

$(selector).validatebox(options);

参数

  • options: 一个包含设置选项的对象。

示例一:基本使用

<!DOCTYPE html>
<html>
<head>
  <title>EasyUI jQuery validateBox 小工具示例</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $('#tt').validatebox();
    });
  </script>
</head>
<body>
  <input id="tt" class="easyui-validatebox" style="width:200px;">
</body>
</html>

这将创建一个 validateBox 小工具,并使用默认设置。在页面加载时,validateBox 小工具将被创建,并可以输入文本。

示例二:自定义设置

<!DOCTYPE html>
<html>
<head>
  <title>EasyUI jQuery validateBox 小工具示例</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $('#tt').validatebox({
        required:true,
        validType:'email',
        missingMessage:'请输入邮箱地址',
        invalidMessage:'请输入有效的邮箱地址',
        onChange:function(newValue,oldValue){
          alert('New Value: '+newValue+', Old Value: '+oldValue);
        }
      });
    });
  </script>
</head>
<body>
  <input id="tt" class="easyui-validatebox" style="width:200px;">
</body>
</html>

这将创建一个 validateBox 小工具,并自定义设置。在页面加载时,validateBox 小工具将被创建,并可以输入文本。它将设置验证规则、提示信息和验证事件。还可以自定义 onChange 事件。

总结:

validateBox 小工具是 EasyUI jQuery 中的一个小部件,用于验证用户输入的文本。使用 $(selector).validatebox(options); 来创建 validateBox 小工具。可以设置验证规则、提示信息、验证事件等属性,还可以自定义验证规则和提示信息。

以上是关于 EasyUI jQuery validateBox 小工具的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:EasyUI jQuery validateBox小工具 - Python技术站

(0)
上一篇 2023年5月11日
下一篇 2023年5月11日

相关文章

  • jQWidgets jqxListBox beginUpdate()方法

    jQWidgets jqxListBox beginUpdate()方法详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件工具包。jqxListBox是其中之一,本文将详细介绍jqxListBox的beginUpdate()方法,包括定义、语法和示例。 beginUpdate()方法的定义 jqxListBox的beginUpda…

    jquery 2023年5月10日
    00
  • jQWidgets jqxScheduler appointmentDoubleClick事件

    jQWidgets是一款jQuery插件,它提供了丰富多样的UI组件。其中,jqxScheduler是jQWidgets里面的一款强大的调度器控件,它可以帮助我们进行日程的管理、预定等操作。jqxScheduler有很多事件,包括appointmentDoubleClick事件,通过该事件我们可以实现双击日程条目弹出对应的模态框等操作。 下面是详细的攻略: …

    jquery 2023年5月11日
    00
  • jQuery Keydown()方法

    jQuery keydown()方法用于在按下键盘上的键时绑定一个或多个事件处理程序。该方法类似于jQuery on()方法,但是它只在按下键盘上的键时触发事件处理程序。 以下是keydown()方法的详细攻略: 语法 $(selector).keydown(handler) 参数 selector:必需,用于选择要绑定事件的元素。 handler:必需,用…

    jquery 2023年5月9日
    00
  • jQWidgets jqxPanel append()方法

    以下是关于 jQWidgets jqxPanel 组件中 append() 方法的详细攻略。 jQWidgets jqxPanel append() 方法 jWidgets jqxPanel 组件的 append() 方法用向面板中添加新的内容。 语法 // 向面板中添加新的内容 $(‘#panel’).append(‘<div>的内容</…

    jquery 2023年5月12日
    00
  • jQuery callbacks.has()方法

    在jQuery中,可以使用callbacks.has()方法来检查回调函数列表中是否存在指定的回调函数。以下是详细攻略,含两个示例,演示如何使用callbacks.has()方法: 语法 callbacks.has()方法语法如下: callbacks.has(callback); 参数说明: callback:必需,要检查的回调函数。 返回值: 如果回调函…

    jquery 2023年5月9日
    00
  • jQuery UI Datepicker导航AsDateFormat选项

    jQuery UI的日期选择器小部件提供了许多选项,可以自定义日期选择器的外观和行为。其中,navigationAsDateFormat选项用于指定日期选择器中导航按钮上显示日期格式。本文将详细介绍navigationAsDateFormat选项的语法和用法,并提供两个示例说明。 语法 以下是navigationAsDateFormat选项的基本语法: $(…

    jquery 2023年5月9日
    00
  • jQuery UI的Draggable enable()方法

    以下是关于 jQuery UI 的 Draggable enable() 方法的详细攻略: jQuery UI Draggable enable() 方法 enable() 方法用于启用可拖动元素。可以使用该方法在禁用可拖动元素后重新启用它。 语法 $(selector).draggable("enable"); 示例一:使用 enabl…

    jquery 2023年5月11日
    00
  • java实现图片滑动验证(包含前端代码)

    来讲解一下 “Java实现图片滑动验证” 的攻略。首先,我们需要了解到 “图片滑动验证” 的原理,这个验证方式分为两张图片,一张为底图,一张为拼图。接着,我们需要将底图和拼图进行重合,形成完整的图片才能通过验证。 具体实现方法步骤如下:1. 前端页面在页面加载时生成拼图及底图,并加入到页面的 DOM 元素中;2. 将图片拼接成一张长图,然后随机截取一部分,再…

    jquery 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部