最近在作移動手機端的時候,看了不少驗證插件都是基於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);