EasyUI

基本效果：

效果：

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: '两次输入的值不相同！'
        },
    })
})