第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件
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(验证框)组件的更多相关文章
- JQuery EasyUI validatebox(验证框)
JQuery EasyUI validatebox(验证框) http://www.easyui.info/archives/602.html
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- ValidateBox( 验证框) 组件
本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id=&quo ...
- easyui -validatebox 验证框加载
问题: easyui验证狂框有时会验证输入字符的位数,或者验证有效字符组合 解决: 使用easyui的验证框,继承验证框,指定输入框为验证框即可 $(function(){ $.extend($.fn ...
- EasyUI Validatebox 验证框
转自:http://www.jeasyui.net/plugins/167.html 通过 $.fn.validatebox.defaults 重写默认的 defaults. 验证框(validate ...
- 第二百一十六节,jQuery EasyUI,Spinner(微调)组件
jQuery EasyUI,Spinner(微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个 ...
- 第二百一十七节,jQuery EasyUI,NumberSpinner(数字微调)组件
jQuery EasyUI,NumberSpinner(数字微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberSpinner ...
- 第二百一十四节,jQuery EasyUI,Calendar(日历)组件
jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...
随机推荐
- svn: warning: xxxx is already under version control
svn stat 查看当前目录下svn状态 svn remove xxxx svn add xxx svn ci -m "注释"
- 我的Android进阶之旅------>Android字符串资源中的单引號问题error: Apostrophe not preceded by 的解决的方法
刚刚在string字符串资源文件里,写了一个单引號.报错了,错误代码例如以下 error: Apostrophe not preceded by \ (in OuyangPeng's blog ) 资 ...
- Python之print详解
Python之print详解 http://www.jb51.net/article/55768.htm print的一些基本用法,在前面的讲述中也涉及一些,本讲是在复习的基础上,尽量再多点内容. ...
- struts.xml 文件添加DTD文件
在编辑struts.xml 文件时,“alt + /”无提示信息,需要在myeclipse 中添加消息头中的文件,步骤如下: 1. 选中该段复制 2. Preferences——>XML Cat ...
- PHP-PHP程序员的技术成长规划(By黑夜路人)
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- Linux命令-网络命令:mail
root用户发送邮件 mail wangyunpeng 给wangyunpeng发送邮件,wangyunpeng不在线也可以收到发送的邮件 wangyunpeng用户接收邮件 mail 接收邮件 he ...
- Java成员变量与局部变量同名
看到成员变量和局部变量同名这个知识点的时候一开始有点懵逼,想了一下其实特别简单. 先来看一个简单的代码. 首先我定义了一个Person类. public class Person { private ...
- 怎样防止应用因获取IDFA被AppStore拒绝
由于Appstore禁止不使用广告而採集IDFA的app上架,友盟提供IDFA版和不含IDFA版两个SDK,两个SDK在数据上并没有差异.採集IDFA是为了防止今后由于苹果可能禁止眼下使用的openu ...
- python 去掉字符串的 "
list_name = ["hello", "岚", "许言午", "公司", "赵六", &quo ...
- 查询MySql数据库架构信息:数据库,表,表字段
/*1.查询所有数据库*/ show databases; /*2.查询所有数据表*/ select * from information_schema.tables where table_sch ...