JQuery EasyUI(21)

最新推荐文章于 2020-05-05 14:08:01 发布

Roger_CoderLife

最新推荐文章于 2020-05-05 14:08:01 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

第二十一章：ValidateBox（验证框）组件

学习要点：

加载方式
属性列表
方法列表
自定义验证

一、加载方式：

1.class 加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
    <div id="email" class="easyui-validatebox" data-options="required:true,validType:'email'"></div>
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
    <div id="email"></div>
 </body>
</html>

$(function(){

   $('#email').validatebox({
      required:true,
      validType:'email',
  });
});

二、属性列表：

ValidateBox属性
属性名	值	说明
required	boolean	定义为必填字段，默认值false
ValidType	string，array	定义字段验证类型，比如：Email、url、length[0,100]、remote['url','paramname']
delay	number	延迟到最后验证输入值。默认值200
missingMessage	string	当文本框未填写时出现的提示信息。默认值：This field is required。
invalidMessage	string	当文本框的内容被验证为无效时出现的提示。默认值：null。
tipPosition	string	定义文本框的内容无效的时候提示消息显示的位置。有效的值有：'left','right'。默认值：right。
deltaX	number	提示框在水平方向上位移，默认值：0。
novalidate	boolean	为true时关闭验证功能。默认值：false。

三、方法列表：

ValidateBox方法
方法名	传参	说明
options	none	返回属性列表
destory	none	移除并销毁组件
validate	none	验证文本框的内容是否有效
isValid	none	调用validate方法并且返回验证结果，true或者false
enableValidation	none	启用验证
disableValidation	none	禁用验证

ps:我们可以使用$.fn.validatebox.defaults重写默认值对象。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
    <div id="email" style="margin-left:200px;"></div>
 </body>
</html>

$(function(){

   $('#email').validatebox({
      required:true,
      //validType:'email',
      //validType:'url',
      //validType:'length[2,10]',
      //validType:'remote["content.php","abc"]',
      //validType:['email','length[5,10]'],
      delay:1000,
      MissingMessage:'请输入内容',
      invalidMessage:'你输入的电子邮件不合法',
      tipPoistion:'right',
      //deltaX:100,
      //novalidate:true,
  });
     //console.log($('#email').validatebox('options'));
     //$('#email').validatebox('destory');

     /*
     $(decument).click(function(){
      //console.log($('#email').validatebox('validate'));
      console.log($('#email').validatebox('isValid'));
      });
    */

     $('#email').validatebox('disableValidation');
     $('#email').validatebox('enableValidation');
});

<?php
  if ($_POST['abc'] == 'Lee'){
     echo 'true';
  }else{
     echo 'false';
}
?>

四、自定义验证：

我们可以使用重写默认规则的方式来创建一个新的规则。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>             
</head>
  <body>
    <div id="email" style="margin-left:200px;"></div>
 </body>
</html>

$(function(){

  $.extend($.fn.validatebox.defaults.rules,{
        minLength:{
            validator:function(value,param){
                 return value.length >=param[0];
         },   
           message:'请长度不小于{0}的字符',          
     },
  });

   $('#email').validatebox({
      required:true,
      validType:'length[2,10]',      
      tipPoistion:'right',

  });
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102975601

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载