当前位置:首页 >> 网络编程

jQuery EasyUI之验证框validatebox实例详解

1.样式

jQuery EasyUI之验证框validatebox实例详解

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

2.练习1:验证输入字符长度及非空

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>validatebox</title> 
<!-- 引入css文件 --> 
<link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> 
<link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link>   
<!-- 引入js文件 --> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

结果:

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

3.练习2:自定义规则作为输入框验证规则

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>validatebox</title> 
<!-- 引入css文件 --> 
<link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> 
<link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> 
<!-- 引入js文件 --> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

结果:

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

4.练习3:验证邮箱

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>validatebox</title> 
<!-- 引入css文件 --> 
<link rel="stylesheet" href="themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> 
<link rel="stylesheet" href="themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" type="text/css"></link> 
   
<!-- 引入js文件 --> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

结果:

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

5.文档

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

以上所述是小编给大家介绍的jQuery EasyUI之验证框validatebox实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!