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

赞 (0)

相关推荐

  • jQuery插件EasyUI校验规则 validatebox验证框

    Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较

  • Jquery Easyui验证组件ValidateBox使用详解（20）

    Jquery Easyui验证组件ValidateBox使用详解（20）

    本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /> JS调用加载 <input id="email" /> <script> $(func

  • easyui关于validatebox实现多重规则验证的方法(必看)

    easyui关于validatebox实现多重规则验证的方法(必看)

    方法一: 自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如: <input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']"> 方法二:(不太好用,试了半天还是不显示第二个验证的消息) 对于1.5版本的easyui.min,注释掉以下代码: 然后再添加 $.extend($.fn.validateb

  • jquery easyui validatebox remote的使用详解

    validatebox 的validateType可以是一下3个格式: 1字符串 2数组,应用多个验证 3对象,每个key是一个验证名称value是验证的数组参数 下面是代码示例 <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options

  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

    先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

  • easyui validatebox验证

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script> <script src="easyui1.2.4/jquery.easyui.min.js" type="te

  • jQuery EasyUI之验证框validatebox实例详解

    jQuery EasyUI之验证框validatebox实例详解

    1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>

  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

  • jQuery图片缩放插件smartZoom使用实例详解

    jQuery图片缩放插件smartZoom使用实例详解

    e-smart-zoom-jquery.js插件,下载地址及示例:https://github.com/e-smartdev/smartJQueryZoom 插件描述:通过将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果. smartZoom使用 举个栗子,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

  • Vue组件全局注册实现警告框的实例详解

    Vue组件全局注册实现警告框的实例详解

    外部引入 <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script

  • 使用微信小程序开发弹出框应用实例详解

    view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button typ

  • Jquery Easyui表单组件Form使用详解（30）

    Jquery Easyui表单组件Form使用详解（30）

    本文实例为大家分享了Jquery Easyui表单组件的实现代码,供大家参考,具体内容如下 加载方式 表单组件只能在 JS 区域设置,首先定义一张表单. <form id="box" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type=&quo

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

  • Jquery Easyui进度条组件Progress使用详解（8）

    Jquery Easyui进度条组件Progress使用详解（8）

    本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

随机推荐