EasyUI jQuery validateBox小工具

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个验证框。验证框的设计是为了验证表单的输入字段。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-validatebox">

属性:

required。它指定该字段在提交前必须填写。
delay。它指定了从最后一个输入值开始验证的延迟。
missingMessage。这是文本框为空时出现的Tooltip文本。
invalidMessage。这是当文本框的内容无效时出现的工具提示文本。
tipPosition。这定义了当文本框的内容无效时提示信息的位置。
deltaX: 这定义了工具提示在X方向的偏移。
novalidate: 这指定了是否要关闭验证。
editable。这指定了用户是否可以直接在该字段中输入文本。
disabled:这指定了是否要禁用验证框。
readonly:这指定了该组件是否为只读。
validateOnCreate。这指定了是否在创建组件后进行验证。
validateOnBlur：这指定了是否在失去焦点时进行验证。

事件:

onBeforeValidate :该事件在一个字段的验证之前发生。
onValidate：该事件在对一个字段进行验证时发生。

方法:

options。返回选项对象。
destroy。删除并销毁该组件。
validate：进行验证以确定文本框的内容是否有效。
isValid。调用验证方法并返回验证结果。
enableValidation:启用验证。
disable Validation。禁用验证。
resetValidation。重置验证。
enable。启用该组件。
disable:禁用该组件。
readonly:启用/禁用只读模式

步骤:

首先，添加你的项目所需的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
        href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 
  
<script type="text/javascript"> 
   $(document).ready(function (){$ ('#gfg').validatebox({
          required: true,
            validType: 'email'
      }); 
  }); 
    </script> 
</head> 
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery validatebox widget</h3>
  
  Enter E-mail : <input id="gfg" class="easyui-validatebox">
    
</body>
</html>

输出:

EasyUI jQuery validateBox小工具