EasyUI - ValidateBox 验证组件

基本效果:

效果:

Html代码:

        <input id="email" />

JS代码:  

默认的有四种验证方式:

  1. email:验证邮箱
  2. url:验证url
  3. length:验证输入长度
  4. remote:Ajax后台验证,具体参数见注释。
$(function () {
    $(‘#email‘).validatebox({
        required: true,//必填项

        // * 默认的是四种,可以自己写方法 *
        validType: ‘email‘,//验证邮箱
        //validType:‘length[5,10]‘,//验证长度
        //validType:‘url‘,//验证url地址
        //validType: ‘remote["../Json/ValidateBox.ashx", "param"]‘,//使用Ajax进行后台验证,返回boolean值,第一个参数是url地址,第二个参数是使用的参数名称,在后台接收。

        //missingMessage: ‘请填写信息!‘,//鼠标经过,但未填写信息时显示的信息。
        //invalidMessage: ‘请输入正确的Email地址!‘,//当输入错误信息时,显示的信息
        tipPosition: ‘right‘,//显示错误信息的方框,显示的位置
        delay: 100,//显示提示框的时间
    })
})

可以不局限于给定的四种验证方式,也可以自定义验证方法。

*自定义方法:验证输入的长度*

效果:

只是其中一个效果截图:

html效果:

        <input id="email" />

JS代码:

$(function () {

    // * 自己写另外一种验证 *
    $.extend($.fn.validatebox.defaults.rules, {
        // * 此方法判断文本框中的值不小于多少位 *
        minLength: {
            validator: function (value, param) {
                return value.length >= param[0];//参数pram[0]相当于  minlength[2,10]中的第一个数,2
            },
            message: ‘请输入不小于{0}的值!‘,//此时的{0}代表的就是param[0]得值。
        },
    })

    $(‘#email‘).validatebox({
        required: true,//必填项
        validType: ‘minLength[2]‘,
    })
})

*自定义方法:两个文本框中的值是否相同*

效果:

html代码:

        <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" />
        <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validtype="equals[‘#pwd‘]" />

JS代码:

$(function () {

    // * 自己写另外一种验证 *
    $.extend($.fn.validatebox.defaults.rules, {

        // * 此方法验证两个文本框中的值是否相同 *
        equals: {
            validator: function (value, param) {
                return value == $(param[0]).val();
            },
            message: ‘两次输入的值不相同!‘
        },
    })
})
时间: 2024-11-05 16:00:30

EasyUI - ValidateBox 验证组件的相关文章

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

easyui -validatebox 验证框加载

问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn.validatebox.defaults.rules, { haha: { validator: function(value){ return /^\d{6}$/.test(value) ; }, message: '请输入6位数字' }, tao: { validator: function(

easyui validatebox 验证类型

2013-06-05 10:58 18426人阅读 评论(5) 收藏 举报 easyuiValidateBox required: "必选字段",        remote: "请修正该字段",        email: "请输入正确格式的电子邮件",        url: "请输入合法的网址",        date: "请输入合法的日期",        dateISO: "请输入合法

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

ValidateBox( 验证框) 组件

本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id="email" class="easyui-validatebox"data-options="required:true,validType:'email'" />//JS 加载调用$('#email').validatebox({required

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

jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 defaults. 用法 代码如下: <input id="vv" required="true" validType="email"> 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验

扩展easyui validatebox的两个方法.移除验证和还原验证

[javascript] view plaincopy $.extend($.fn.validatebox.methods, { remove: function(jq, newposition){ return jq.each(function(){ $(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox'); })

Easyui的validatebox验证方法自定义扩展

由于easyui的validatebox本身提供的验证方法较少,故对其进行了自定义扩展. 1.新建一个js文件 —— extendValidateboxRules.js   ,内容如下: /** * auther by Highness * date : xxxx-xx-xx */ // 时间格式规范var regex_dateTime = /\d{4}\-\d{2}\-\d{2} \d{2}\:\d{2}:\d{2}/;//@author ren $.extend($.fn.validateb

Jquery EasyUI 中ValidateBox验证框使用讲解

Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 使用$.fn.validatebox.defaults重写默认值对象. 具体用法如下: <input id="email" class="easyui-validatebox" data-options="required:true,val