第二百一十一节，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]'
    });
});