第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

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'
});
});

二.属性列表

第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

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。
});
});

三.方法列表

第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

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(验证框)组件

上一篇:c语言字符串转OC字符串


下一篇:tooltip提示框组件