jQuery EasyUI之验证框validatebox实例详解


Posted in jQuery onApril 10, 2017

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="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> 
</head> 
<body> 
  姓名:<input id="validateboxID"/><p/> 
</body> 
<script type="text/javascript"> 
 $("#validateboxID").validatebox({ 
  required:true, 
  validType:['length[1,6]','zhongwen'] 
 }); 
</script> 
</html>

结果:

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="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> 
</head> 
<body> 
 姓名:<input id="validateboxID"/><p/> 
 <!-- 邮箱:<input id="emailID"/><p/> 
 密码:<input id="passwordID"/><p/> --> 
</body> 
<script type="text/javascript"> 
 $("#validateboxID").validatebox({ 
  required:true, 
  validType:['length[1,6]','zhongwen'] 
 }); 
 $.extend($.fn.validatebox.defaults.rules,{ 
  zhongwen:{ 
   validator:function(value){ 
    //如果符合中文 
    if(/^[\u3220-\uFA29]*$/.test(value)){ 
     return true; 
    } 
   }, 
   //如果不符合中文,以下就是提示信息 
   message:'姓名必须全为中文' 
  } 
 }); 
</script> 
</html>

结果:

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="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> 
</head> 
<body> 
 邮箱:<input id="emailID"/><p/> 
</body> 
<script type="text/javascript"> 
 $("#emailID").validatebox({ 
  required:true, 
  validType:['length[1,30]','email'] 
   
 }); 
</script> 
</html>

结果:

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

5.文档

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

jQuery EasyUI之验证框validatebox实例详解

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

jQuery 相关文章推荐
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现简单全选框
Sep 13 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
You might like
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
Javascript的闭包详解
2014/12/26 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python多线程原理与用法详解
2018/08/20 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
酒店管理自荐信
2013/10/23 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
给学校的建议书
2014/03/12 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
详解nginx进程锁的实现
2021/06/14 Servers