jQuery EasyUi 验证功能实例解析

废话不多说了,下面给大家介绍下jquery easyui 验证功能的实例代码。

{
          field : 'startPort',
          title : "起始端口",
          editor: "text",
          width : 50,
          editor: {
            type: 'SuperValidatebox',
            options: {
              required: true,
              validType: ['integer','length[0,5]']
            }
          },       

自从1.3.2版本开始,validatebox自身已经支持多重校验了,例如:

input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']"> 
<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="text/javascript"></script>
  <!--自定义验证-->
  <script src="easyui1.2.4/validator.js" type="text/javascript"></script>
  <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  <script>
    $(function () {
      //设置text需要验证
      $('input[type=text]').validatebox();
    })
  </script>
</head>
<body>
  邮箱验证:<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />
  网址验证:<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />
  长度验证:<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />
  手机验证:<input type="text" validtype="mobile" /><br />
  邮编验证:<input type="text" validtype="zipcode" /><br />
  账号验证:<input type="text" validtype="account[8,20]" /><br />
  汉子验证:<input type="text" validtype="CHS" /><br />
  远程验证:<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>
</body>
</html>  

自定义验证:

//扩展easyui表单的验证
$.extend($.fn.validatebox.defaults.rules, {
  //验证汉子
  CHS: {
    validator: function (value) {
      return /^[\u0391-\uFFE5]+$/.test(value);
    },
    message: '只能输入汉字'
  },
  //移动手机号码验证
  mobile: {//value值为文本框中的值
    validator: function (value) {
      var reg = /^1[3|4|5|8|9]\d{9}$/;
      return reg.test(value);
    },
    message: '输入手机号码格式不准确.'
  },
  //国内邮编验证
  zipcode: {
    validator: function (value) {
      var reg = /^[1-9]\d{5}$/;
      return reg.test(value);
    },
    message: '邮编必须是非0开始的6位数字.'
  },
  //用户账号验证(只能包括 _ 数字 字母)
  account: {//param的值为[]中值
    validator: function (value, param) {
      if (value.length < param[0] || value.length > param[1]) {
        $.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';
        return false;
      } else {
        if (!/^[\w]+$/.test(value)) {
          $.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';
          return false;
        } else {
          return true;
        }
      }
    }, message: ''
  }
}) 

js

$.extend($.fn.validatebox.defaults.rules, {
    checkWSDL: {
      validator: function(value,param){
         var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";
         return reg.test(value);
      },
      message: '请输入合法的WSDL地址'
    },
    checkIp : {// 验证IP地址
      validator : function(value) {
        var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;
        return reg.test(value);
      },
      message : 'IP地址格式不正确'
  }
});

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

时间: 2017-01-05

实例解析jQuery插件EasyUI最常用的表单验证规则

例如:校验输入框只能录入0-1000之间 最多有2位小数的数字 表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox"  validType="rateCheck[0,1000]"  maxlength="6" /> $.extend($.f

jQuery EasyUI API 中文文档 - ValidateBox验证框

用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

Jquery插件easyUi表单验证提交(示例代码)

复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

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

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

jQuery EasyUI提交表单验证

EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性. url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true'

jQuery Easyui 验证两次密码输入是否相等

什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是

Jquery插件easyUi实现表单验证示例

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

jQuery EasyUI常用数据验证汇总

easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下 $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u0391-\uFFE5]+$/.test(value); }, message: '请输入汉字' }, ZIP: { validator: function (value, param)

jquery插件bootstrapValidator数据验证详解

因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载实例) 以上这些都是必须的. 先上个简单的例子,只要导入相应的文件可以直接运行: <!DOCTYP

jQuery EasyUI 开源插件套装 完全替代ExtJS

前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

jQuery EasyUI基础教程之EasyUI常用组件(推荐)

本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易

JQuery EasyUI的一些常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

jQuery EasyUI之验证框validatebox实例详解

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

jQuery 开发之EasyUI 添加数据的实例

jQuery 开发之EasyUI 添加数据的实例 1.创建toolbar: toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ openAddUserDialog(); } }] 2.添加dialog,里面有添加用户的表单 <div id="addDialog" data-options="closed:true,modal:true,title:'addUser', buttons:[{ text

JQuery 简便实现页面元素数据验证功能

ASP.NET提供了丰富的数据验证控件,但这个验证功能都必须运用在服务器控件中:在复合验证数据时使用也不是很方便(虽然拖放控件很方便,但拖放数增多和设置相关属性就变得很麻烦的事情).为了更方便灵活地实现验证功能,于是采用了JQuery编写了一个简单验证组件,在使用时只需要简单的描述一下验证规则,并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能(当然页面要引入相关JavaScript文件). 功能目标        通过简单的自定义属性值描述具体的验证功能,当Form提