基於zepto的驗證插件的開發

最近在作移動手機端的時候,看了不少驗證插件都是基於jquery寫的,可是容量和體積太大,考慮手機端對於2g和訪問速度的要求,因而本身寫了一個,歡迎大神們拍磚。jquery

首先要引用 zepto;ajax

if (typeof Zepto === 'undefined') {
    throw new Error('Zepto.Validate\'s JavaScript requires Zepto')
}

+(function ($) {
    $.fn.ValidateForm = function (options) {
        this.each(function () {
            new validateForm(this);
        });
    };
    var validateForm = function (elem) {
        this.elem = elem;
        this.opt = {
            //提示信息
            tips_required: '不能爲空',
            tips_email: '郵箱地址格式有誤',
            tips_num: '請填寫數字',
            tips_chinese: '請填寫中文',
            tips_mobile: '手機號碼格式有誤',
            tips_idcard: '身份證號碼格式有誤',
            tips_pwdequal: '兩次密碼不一致',
            tips_ajax: '信息已經存在',
            tips_numletter: '請輸入數字和字母的組合字符',
            tips_length: '',
            tips_passport: '護照格式有誤',

            //正則
            reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i,  //驗證郵箱
            reg_num: /^\d+$/,                                  //驗證數字
            reg_chinese: /^[\u4E00-\u9FA5]+$/,                 //驗證中文
            reg_mobile: /^1[34578]{1}[0-9]{9}$/,                //驗證手機
            reg_idcard: /^\d{14}\d{3}?\w$/,                    //驗證身份證
            reg_numletter: /[^\d|chun]/,                       //驗證數字和字母
            reg_passport: /^1[45][0-9]{7}|G[0-9]{8}|P[0-9]{7}|S[0-9]{7,8}|D[0-9]+$/ //驗證護照
        };
        this.options = $.extend(this.opt);
        this.validate();
    };
    validateForm.prototype = {
        validate: function () {
            //validate form ;
            _this = this;
            var isValid = true;
            $(_this.elem).find("input,textarea").each(function () {
                var _validate = $(this).attr("check");
                if (_validate) {
                    var arr = _validate.split(' ');
                    for (var i = 0; i < arr.length; i++) {
                        if (!_this.check($(this), arr[i], $(this))) {
                            isValid = false; //驗證不經過阻止表單提交,開關false
                            //return isValid; //跳出
                        }
                    }

                    return isValid;
                }
            });
        },
        check: function (obj, _match, elem) {
            var _val = $.trim($(elem).val());
            //根據驗證狀況,顯示相應提示信息,返回相應的值
            switch (_match) {
                case 'required':
                    return _val ? true : _this.showErrorMsg(obj, this.opt.tips_required, false);
                case 'email':
                    return regmatch(_val, this.opt.reg_email) ? true : _this.showErrorMsg(obj, this.opt.tips_email, false);
                case 'num':
                    return regmatch(_val, this.opt.reg_num) ? true : _this.showErrorMsg(obj, this.opt.tips_num, false);
                case 'chinese':
                    return chk(_val, this.opt.reg_chinese) ? true : _this.showErrorMsg(obj, this.opt.tips_chinese, false);
                case 'mobile':
                    return regmatch(_val, this.opt.reg_mobile) ? true : _this.showErrorMsg(obj, this.opt.tips_mobile, false);
                case 'idcard':
                    return regmatch(_val, this.opt.reg_idcard) ? true : _this.showErrorMsg(obj, this.opt.tips_idcard, false);
                case 'numletter':
                    return regmatch(_val, this.opt.reg_numletter) ? true : _this.showErrorMsg(obj, this.opt.tips_numletter, false);
                case 'passport':
                    return regmatch(_val, this.opt.reg_passport) ? true : _this.showErrorMsg(obj, this.opt.tips_passport, false);
                case 'pwd1':
                    pwd1 = _val; //實時獲取存儲pwd1值
                    return true;
                case 'pwd2':
                    return pwdEqual(_val, pwd1) ? true : _this.showErrorMsg(obj, this.opt.tips_pwdequal, false);
                case 'ajaxvalid':
                    return ajaxValidate(_val, $(elem).attr("ajaxurl")) ? true : _this.showErrorMsg(obj, this.opt.tips_ajax, false);
                case 'length':
                    return pwdEqual(_val, elem) ? true : _this.showErrorMsg(obj, this.opt.tips_length, false);
                default:
                    return true;
            };
        },
        pwdEqual: function (val1, val2) {
            return val1 === val2 ? true : false;
        },
        regmatch: function (value, regExp) {
            if (value !== "") {
                return regExp.test(str);
            }
            return true;
        },
        chekLength: function (value, elem) {
            var result = true;
            if ($(elem).attr("min") !== false) {
                if (str.length < parseInt($(elem).attr("min"))) {
                    this.opt.tips_length = "至少輸入" + $(elem).attr("min") + "位字符";
                    result = false;
                }
            }
            if ($(elem).attr("max") !== false) {
                if (str.length > parseInt($(elem).attr("max"))) {
                    this.opt.tips_length = "最多輸入" + $(elem).attr("max") + "位字符";
                    result = false;
                }
            }
            return result;
        },
        ajaxValidate: function (value, url) {
            var isValid = false;
            $.ajax({
                type: 'POST',
                url: url,
                data: { value: value },
                dataType: 'json',
                timeout: 300,
                async: false,
                success: function (result) {
                    this.opt.tips_ajax = result.Message;
                    isValid = result.Success;
                },
                error: function (xhr, type) {
                }
            }
                )
            return isValid;
        },
        showErrorMsg: function (obj, msg, mark) {
            if (!mark) {
                Messages.ShowTip($(obj).attr("title") + msg);
            }
            return mark;
        }
    };

})(Zepto);
相關文章
相關標籤/搜索