jQueryEasyUI之验证框validatebox怎么用

这篇文章主要介绍jQuery EasyUI之验证框validatebox怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司主打移动网站、网站设计制作、成都网站制作、网站改版、网络推广、网站维护、空间域名、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。

1.样式

jQuery EasyUI之验证框validatebox怎么用

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

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

 
 
 
 
validatebox 
 
 
   
 
 
 
 
 
 
  姓名:

       $("#validateboxID").validatebox({    required:true,    validType:['length[1,6]','zhongwen']   });   

结果:

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

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

 
 
 
 
validatebox 
 
 
 
 
 
 
 
 
 
 姓名:

          $("#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:'姓名必须全为中文'    }   });   

结果:

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

4.练习3:验证邮箱

 
 
 
 
validatebox 
 
 
 
   
 
 
 
 
 
 
 邮箱:

       $("#emailID").validatebox({    required:true,    validType:['length[1,30]','email']       });   

结果:

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

5.文档

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

jQuery EasyUI之验证框validatebox怎么用

以上是“jQuery EasyUI之验证框validatebox怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章题目:jQueryEasyUI之验证框validatebox怎么用
URL网址:http://ybzwz.com/article/jpdooo.html