jQuery EasyUI,ValidateBox(验证框)组件

学习要点:

  1.加载方式

  2.属性列表

  3.方法列表

  4.自定义验证

本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于 Tooltip(提示框)组件。

一.加载方式

class 加载方式

<input id="email" class="easyui-validatebox"
data-options="required:true,validType:'email'" />

validatebox将一个输入框执行验证框方法

JS 加载调用

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

二.属性列表

required boolean 定义为必填字段。默认为 false。不能为空

/**
<input id="email" />
**/ $(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
validType: 'email'
});
});

validType string,array定义字段验证类型,比如:email、url、length[0,100] 、remote['url','paramname']。默认值为:null。

电子邮件验证

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: 'email' //必须为电子邮件类型
});
});

网址验证,还必须包含http

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: 'url' //网址验证,还必须包含http
});
});

字符串验证位数

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: 'length[5,10]' //字符串验证位数
});
});

远程服务器验证

/**
<input name="par" id="email" />
**/ $(function () {
$('#email').validatebox({
// required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: 'remote["user.php","par"]' //远程服务器验证,第一个参数是远程文件,第二个参数数输入框name值
//远程返回true通过,返回false不通过
});
});

组合形式,用数组方式包含

/**
<input name="par" id="email" />
**/ $(function () {
$('#email').validatebox({
// required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"] //组合形式,邮件格式5值10位
});
});

delay number 延迟到最后验证输入值。默认值200。验证反应时间

$(function () {
$('#email').validatebox({
// required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
delay:1000 //验证反应时间
});
});

missingMessage string 当文本框未填写时出现的提示信息。默认值:This field is required。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
delay:1000, //验证反应时间
missingMessage:'请输入电子邮件' //当文本框未填写时出现的提示信息
});
});

invalidMessage string 当文本框的内容被验证为无效时出现的提示。默认值 null。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
});

tipPosition string定义当文本框内容无效的时候提示消息显 示 的 位 置 , 有 效 的 值 有 :'left','right'。默认值 right。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件',
tipPosition:'right'
});
});

deltaX number 提示框在水平方向平移。默认值0。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件',
tipPosition:'right',
deltaX:
});
});

novalidate boolean 为 true 时关闭验证功能。默认值 false。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件',
tipPosition:'right',
deltaX:50,
novalidate:true //true 时关闭验证功能。默认值 false。
});
});

三.方法列表

options   none 返回属性列表。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
alert($('#email').validatebox('options')); //返回属性对象
});

destroy   none 移除并销毁组件。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
$('#email').validatebox('destroy'); //移除并销毁组件
});

validate   none 验证文本框的内容是否有效。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
alert($('#email').validatebox('validate')); //验证文本框的内容是否有效
});

isValid   none调用 validate 方法并且返回验证结果,true 或者 false。一般用这个

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
alert($('#email').validatebox('isValid')); //验证文本框的内容是否有效
});

enableValidation   none 启用验证。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
$('#email').validatebox('disableValidation'); //禁用验证
$('#email').validatebox('enableValidation'); //启用验证
});

disableValidation   none 禁用验证。

$(function () {
$('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType: ["email","length[5,10]"], //组合形式,邮件格式5值10位
missingMessage:'请输入电子邮件', //当文本框未填写时出现的提示信息
invalidMessage:'请输入5至10位正确的电子邮件'
});
$('#email').validatebox('disableValidation'); //禁用验证
$('#email').validatebox('enableValidation'); //启用验证
});

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

四.自定义验证

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

新增一个规则

$(function () {
//新增一个验证规则
$.extend($.fn.validatebox.defaults.rules, {
minLength: { //自定义名称
validator: function (value, param) {
//value接收的输入字符, param接收的使用自定义时传进来的位数
return value.length >= param[0];
},
message: '请长度不小于{0}的字符'
}
}); $('#email').validatebox({
required: true, // 定义为必填字段。默认为 false。不能为空
//定义字段验证类型
validType : 'minLength[5]'
});
});

第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件的更多相关文章

  1. JQuery EasyUI validatebox(验证框)

    JQuery EasyUI validatebox(验证框) http://www.easyui.info/archives/602.html

  2. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

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

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  4. ValidateBox( 验证框) 组件

    本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id=&quo ...

  5. easyui -validatebox 验证框加载

    问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...

  6. EasyUI Validatebox 验证框

    转自:http://www.jeasyui.net/plugins/167.html 通过 $.fn.validatebox.defaults 重写默认的 defaults. 验证框(validate ...

  7. 第二百一十六节,jQuery EasyUI,Spinner(微调)组件

    jQuery EasyUI,Spinner(微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个 ...

  8. 第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件

    jQuery EasyUI,NumberSpinner(数字微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberSpinner ...

  9. 第二百一十四节,jQuery EasyUI,Calendar(日历)组件

    jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...

随机推荐

  1. svn: warning: xxxx is already under version control

    svn stat  查看当前目录下svn状态 svn remove xxxx svn add xxx svn ci -m "注释"

  2. 我的Android进阶之旅------&gt;Android字符串资源中的单引號问题error: Apostrophe not preceded by 的解决的方法

    刚刚在string字符串资源文件里,写了一个单引號.报错了,错误代码例如以下 error: Apostrophe not preceded by \ (in OuyangPeng's blog ) 资 ...

  3. Python之print详解

    Python之print详解 http://www.jb51.net/article/55768.htm   print的一些基本用法,在前面的讲述中也涉及一些,本讲是在复习的基础上,尽量再多点内容. ...

  4. struts.xml 文件添加DTD文件

    在编辑struts.xml 文件时,“alt + /”无提示信息,需要在myeclipse 中添加消息头中的文件,步骤如下: 1. 选中该段复制 2. Preferences——>XML Cat ...

  5. PHP-PHP程序员的技术成长规划(By黑夜路人)

    按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...

  6. Linux命令-网络命令:mail

    root用户发送邮件 mail wangyunpeng 给wangyunpeng发送邮件,wangyunpeng不在线也可以收到发送的邮件 wangyunpeng用户接收邮件 mail 接收邮件 he ...

  7. Java成员变量与局部变量同名

    看到成员变量和局部变量同名这个知识点的时候一开始有点懵逼,想了一下其实特别简单. 先来看一个简单的代码. 首先我定义了一个Person类. public class Person { private ...

  8. 怎样防止应用因获取IDFA被AppStore拒绝

    由于Appstore禁止不使用广告而採集IDFA的app上架,友盟提供IDFA版和不含IDFA版两个SDK,两个SDK在数据上并没有差异.採集IDFA是为了防止今后由于苹果可能禁止眼下使用的openu ...

  9. python 去掉字符串的 "

    list_name = ["hello", "岚", "许言午", "公司", "赵六", &quo ...

  10. 查询MySql数据库架构信息:数据库,表,表字段

    /*1.查询所有数据库*/ show databases;  /*2.查询所有数据表*/ select * from information_schema.tables where table_sch ...