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="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>

//自定义validator.js
//扩展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: ''
 }
})
赞 (0)

相关推荐

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

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

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

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

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

  • 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使用详解（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实例详解

    jQuery EasyUI之验证框validatebox实例详解

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

  • 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的验证扩展

    一.扩展easyui的验证规则 二.使用 在data-option加上属性:validType:'phone',如下面所示: data-options="required:true,validType:'phone'"   data-options="required:false,validType:'telePhone'"  三.部分校验方法 /** * 去掉字符串头尾空格 * @param str 传入的字符串值 * @author lqy * @since 2

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

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

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

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

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

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

  • jQuery EasyUI API 中文帮助文档和扩展实例

    jQuery EasyUI API 中文帮助文档和扩展实例

    下载地址:jQuery EasyUI API 中文帮助文档 1.validatebox验证和提示框扩展: //弹框 $.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); } }); //扩展validatebox,添加验证 $.extend($.fn.validatebox.defaults.rules, { eqPwd: { validator: function (va

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

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

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

随机推荐