全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

jQuery EasyUI之验证框validatebox实例详解

1.样式

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>

结果:


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> 

结果:


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> 

结果:


5.文档




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


# easyui  # validatebox  # Jquery Easyui验证组件ValidateBox使用详解(20)  # jquery easyui validatebox remote的使用详解  # easyui validatebox验证  # jQuery easyui的validatebox校验规则扩展及easyui校验框validateb  # jQuery插件EasyUI校验规则 validatebox验证框  # easyui关于validatebox实现多重规则验证的方法(必看)  # 表单  # 提示信息  # 小编  # 输入框  # 将会  # 在此  # 给大家  # 自定义  # 不符合  # 所述  # 给我留言  # 感谢大家  # 是为了  # 及非  # 疑问请  # 有任何  # 文档  # DOCTYPE  # head  # meta 


相关文章: 如何在建站主机中优化服务器配置?  制作网页的网站有哪些,电脑上怎么做网页?  创业网站制作流程,创业网站可靠吗?  再谈Python中的字符串与字符编码(推荐)  小型网站建站如何选择虚拟主机?  如何在万网自助建站平台快速创建网站?  三星网站视频制作教程下载,三星w23网页如何全屏?  建站主机系统SEO优化与智能配置核心关键词操作指南  官网自助建站系统:SEO优化+多语言支持,快速搭建专业网站  如何构建满足综合性能需求的优质建站方案?  如何用腾讯建站主机快速创建免费网站?  XML的“混合内容”是什么 怎么用DTD或XSD定义  制作网站公司那家好,网络公司是做什么的?  陕西网站制作公司有哪些,陕西凌云电器有限公司官网?  如何确认建站备案号应放置的具体位置?  ppt制作免费网站有哪些,ppt模板免费下载网站?  如何在万网主机上快速搭建网站?  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用?  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  测试制作网站有哪些,测试性取向的权威测试或者网站?  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  建站之星各版本价格是多少?  网站制作公司排行榜,四大门户网站排名?  建站之星后台密码遗忘?如何快速找回?  建站之星如何取消后台验证码生成?  南宁网站建设制作定制,南宁网站建设可以定制吗?  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的?  广州美橙建站如何快速搭建多端合一网站?  安云自助建站系统如何快速提升SEO排名?  详解jQuery停止动画——stop()方法的使用  建站之星备案流程有哪些注意事项?  如何用PHP工具快速搭建高效网站?  如何在Windows服务器上快速搭建网站?  招贴海报怎么做,什么是海报招贴?  网站建设制作需要多少钱费用,自己做一个网站要多少钱,模板一般多少钱?  浅析上传头像示例及其注意事项  山东网站制作公司有哪些,山东大源集团官网?  深圳 网站制作,深圳招聘网站哪个比较好一点啊?  如何有效防御Web建站篡改攻击?  岳西云建站教程与模板下载_一站式快速建站系统操作指南  沈阳个人网站制作公司,哪个网站能考到沈阳事业编招聘的信息?  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么?  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊?  专业网站建设制作报价,网页设计制作要考什么证?  PHP 500报错的快速解决方法  如何在IIS7上新建站点并设置安全权限?  深圳网站制作设计招聘,关于服装设计的流行趋势,哪里的资料比较全面?  ,想在网上投简历,哪几个网站比较好?  建站与域名管理如何高效结合?  建站之星官网登录失败?如何快速解决? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。