jQuery EasyUI之验证框validatebox实例详解

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

时间: 2017-04-08

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

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使用详解(20)

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

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

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

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

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

AngularJS身份验证的方法

权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们需要额外多做一些事

老生常谈php中传统验证与thinkphp框架(必看篇)

PHP(超文本预处理器)可用于小型网站的搭建,当用户需要注册登录是,需要与后台数据库进行匹配合格才能注册和登录,传统的方式步骤繁多,需要先连接数据库再用sql语句进行插入. <?php header("Content-type: text/html; charset=utf-8"); $conn =mysqli_connect("localhost","root",""); if (!$conn){ echo "

jQuery Validate让普通按钮触发表单验证的方法

一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢? 目前写法: $(function(){ $("#form").validate({ rules : { user_name : { required : true }, -- }, messages : { user_name : { required : '用户名必填', }, -- } }); }); 改写方法: //编写表单验证函数validform

jquery实现用户信息修改验证输入方法汇总

本文实例讲述了jquery实现用户信息修改验证输入方法.分享给大家供大家参考.具体如下: var realnameFlag = 0; var addressFlag = 0; var zipFlag=0; var cellphoneFlag=0; var homephoneFlag=0; var oldpasswordFlag=1; var newpasswordFlag=1; //判断email function check_email() { $("#showSpan").hide

EasyUI Tree树组件无限循环的解决方法

在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环.如: tree.json [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text"

在Django中进行用户注册和邮箱验证的方法

本文主要介绍我在利用Django写文章时,采用的注册方法.首先说一下整体逻辑思路: •处理用户注册数据, •产生token,生成验证URL, •发送验证邮件, •用户登录网址,进行验证, •验证处理. 具体步骤: 1.添加用户 在Django中自带的User表中,有一个is_active字段,默认值是True,即用户填完表单提交之后,就可以进行登录.我们这里首先将is_acitve字段设为False,也就是说,必须经过后续的邮箱验证,才能够正常登录. 部分代码: if request.metho

Python中使用django form表单验证的方法

一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <div> <for

Golang算法问题之数组按指定规则排序的方法分析

本文实例讲述了Golang算法问题之数组按指定规则排序的方法.分享给大家供大家参考,具体如下: 给出一个二维数组,请将这个二维数组按第i列(i从1开始)排序,如果第i列相同,则对相同的行按第i+1列的元素排序, 如果第i+1列的元素也相同,则继续比较第i+2列,以此类推,直到最后一列.如果第i列到最后一列都相同,则按原序排列. 样例输入: 1,2,3 2,3,4 2,3,1 1,3,1 按第2列排序,输出: 1,2,3 2,3,1 1,3,1 2,3,4 代码实现: 复制代码 代码如下: pac