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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery中DOM操作原则实例分析
Aug 01 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 编程的 5个良好习惯
2009/02/20 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP输出日历表代码实例
2015/03/27 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
移动端js图片查看器
2016/11/17 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
机器学习python实战之决策树
2017/11/01 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Django重设Admin密码过程解析
2020/02/10 Python
python实现logistic分类算法代码
2020/02/28 Python
Python中有几个关键字
2020/06/04 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
超市中秋节促销方案
2014/03/21 职场文书
会计岗位说明书
2014/07/29 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
道歉的话语大全
2015/05/12 职场文书
阿甘正传观后感
2015/06/01 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL