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实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
easyui,validatebox

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“jQuery EasyUI之验证框validatebox实例详解”
暂无“jQuery EasyUI之验证框validatebox实例详解”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。