jquery实现简易验证插件封装

本文实例为大家分享了封装jquery简易验证插件的具体代码，供大家参考，具体内容如下

html代码：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>jQuery数据校验插件开发</title><link rel=\"stylesheet\" href=\"css/register.css\" /><link rel=\"stylesheet\" href=\"css/validate.css\" /></head><body><main><section><form method=\"post\" action=\"result.html\" ac id=\"register\"><div class=\"register-wrap\"><div class=\"register\"><ul><li><label for=\"username\">用户名：</label><input type=\"text\" id=\"username\" name=\"username\" tabindex=\"1\" class=\"format-input\" placeholder=\"请输入用户名\" data-vt-required-msg=\"用户名不能为空\" data-vt-regexp-msg=\"用户名必须是以字母、数字、下划线组成,且不能以数字开头(6-20位)\" data-vt-required=true data-vt-regexp=\'^[\\w_]\\w{5,19}$\' autofocus></li><li><label for=\"pwd\">密码：</label><input type=\"password\" id=\"pwd\" name=\"password\" tabindex=\"2\" class=\"format-input\" placeholder=\"请输入密码\" data-vt-required=true data-vt-regexp=\"^[a-zA-Z_][\\w_]{5,11}$\" data-vt-required-msg=\"密码不能为空\" data-vt-regexp-msg=\"密码必须是由字母、数字、下划线组成，且不能以数字开头(6-12位)\" ></li><li><label for=\"confirmPwd\">确认密码：</label><input type=\"password\" id=\"confirmPwd\" name=\"password\" tabindex=\"3\" class=\"format-input\" placeholder=\"请再次输入密码\" data-vt-required=true data-vt-required-msg=\"密码不能为空\" data-vt-equals=true data-vt-equals-msg=\"两次密码不一致\"></li><li><label for=\"phone\">手机号：</label><input type=\"text\" id=\"phone\" name=\"phone\" tabindex=\"4\" class=\"format-input\" placeholder=\"请输入手机号\" data-vt-required=true data-vt-phone=true data-vt-required-msg=\"手机号不能为空\" data-vt-phone-msg=\"手机号不合法\"></li><li><label for=\"tel\">座机：</label><input type=\"text\" id=\"tel\" name=\"tel\" tabindex=\"5\" class=\"format-input\" placeholder=\"请输入座机号码\" data-vt-required=true data-vt-tel=true data-vt-required-msg=\"座机号不能为空\" data-vt-tel-msg=\"座机号不合法\"></li><li><label for=\"email\">邮箱：</label><input type=\"text\" id=\"email\" name=\"email\" tabindex=\"6\" class=\"format-input\" placeholder=\"请输入邮箱地址\" data-vt-required=true data-vt-email=true data-vt-required-msg=\"邮箱不能为空\" data-vt-email-msg=\"邮箱不合法\" ></li><li><label for=\"submitBtn\"></label><input type=\"submit\" value=\"注册\" id=\"submitBtn\" tabindex=\"7\" class=\"format-input submit-btn\"></li></ul></div></div></form></section></main><script src=\"js/jquery2.0.js\"></script><script src=\"js/formValidate.js\"></script><script>$(function(){$(\'#register\').formValidate();});</script></body></html>

css部分

* {margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}ul li {list-style: none;position: relative;}input {outline: 0;}.format-input {display: inline-block;width: 84%;height: 35px;padding: 0 0 0 3px;border: 1px solid #fff;vertical-align: baseline;}:focus {outline: 4px solid #007fff;}html,body {width: 100%;height: 100%;}body {min-height: 100%;font: 12px/1.5 \'Microsoft YaHei\', arial, sans-serif;background: url(../image/bj.jpg) no-repeat;background-size: cover;overflow: hidden;}.register-wrap {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 450px;height: 415px;margin: auto;background: rgba(0, 0, 0, 0.5);}.register {width: 100%;height: 100%;padding: 20px 30px;color: #fff;}.register > ul > li {font-size: 0;margin: 0 0 20px 0;}.register > ul > li label {display: inline-block;width: 16%;font-size: 12px;}.submit-btn {border: 1px solid transparent;font-size: 18px;font-weight: bold;color: #fff;background: #51a8ff;box-shadow: 1px 1px #AFC4EA,2px 2px #AFC4EA,3px 3px #AFC4EA;}.submit-btn:hover {cursor: pointer;}.submit-btn:focus {outline: none;border: 1px solid #f0f3f9;}.submit-btn:active {border: 1px solid #f0f3f9;transform: translate(1px, 1px);box-shadow: 1px 1px #AFC4EA,2px 2px #AFC4EA;}

提示错误的tips样式：

.validate-error-tip {position: absolute;top: 0;left: 0;display: table;min-width: 150px;min-height: 35px;font-size: 12px;border: 1px solid lightblue;padding: 5px;background: #fff;color: #666;z-index: 9999;}.validate-error-tip:before {position: absolute;top: 0;left: -15px;display: block;content: \'\';width: 0;height: 0;border-color: transparent lightblue transparent transparent;/*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/border-style: solid;border-width: 15px 15px 15px 0;}

javascript部分：

(function($, factory, pluginName) {factory($, pluginName);})(jQuery, function($, pluginName){//插件默认配置项var __DEFAULT__ = {//默认触发验证的事件为input事件initEvent: \'input\',prefix: \'vt\' //自定义属性前缀};//插件内部编写校验规则var __RULES__ = {//正则regexp: function(ruleData) {return new RegExp(ruleData).test(this.val());},//必填项required: function(ruleData) {return $.trim(this.val()).length > 0;},//最小值minLength: function(ruleData) {return $.trim(this.val()).length > ruleData ;},//最大值maxLength: function(ruleData) {return $.trim(this.val()).length < ruleData;},//验证两次密码是否一致isEquals: function(ruleData) {var pwd = $(\':password\').eq(0); //$(\':password\')[0]是什么对象呢？return pwd.val() === this.val();},//是否是邮箱isEmail: function(ruleData) {return /\\w+@\\w+\\..+/g.test(this.val());},//是不是手机号isPhone: function(ruleData) {return /^1\\d{10}$/g.test(this.val());},//是不是座机号码isTel: function(ruleData) {return /^0\\d{2,3}-\\d{7,8}$/g.test(this.val());}};$.fn[pluginName] = function(options) {//标识是否提交表单var $this = this;if(!$this.is(\'form\')) { return; }//this: 这里的this是jQuery实例对象$this.$file = $this.find(\'input:not([type=\"button\"][type=\"submit\"])\'); //给当前实例对象(也就是调用该插件的jquery对象)添加一个$file的属性$.extend($this, __DEFAULT__, options); //以默认配置为优先，以用户配置为覆盖//格式化rule规则。// 将一个字符串在每一个大写字母前加上一个\'-\',并且全部转为小写// vtEmailMsg > vt-email-msg$this.formatRule = function(str, connector) {if(typeof str !== \'string\') {return str;}//使用replace、正则(匹配单个大写字母)str = str.replace(/[A-Z]/g,function(match, index) {if(index === 0) { return match.toLowerCase() }return connector + match.toLowerCase();});return str;};//显示错误信息$this.showErrorTip = function(errorMsg) {var $tip = $(\"<div class=\'validate-error-tip\'> </div>\"),offset = this.position(),elHeight = this.outerHeight(),elWidth = this.outerWidth();if(this.siblings(\'.validate-error-tip\').length > 0){this.siblings(\'.validate-error-tip\').eq(0).text(errorMsg).show();} else {$tip.text(errorMsg).css({top: offset.top,left: offset.left + elWidth + 15,width: $tip.width()});this.after($tip);$tip.show();}};//监听form表单里所有的input的事件$this.$file.on(this.initEvent, function(){var $input = $(this);//清除错误提示框$input.siblings(\'.validate-error-tip\').remove();//注意这里是循环的我们插件的规则，而不是用户拥有的规则$.each(__RULES__, function(key, fn) {var rule = \'\',errorMsg = \'\';//如果key是以is字符开头、则去掉isif(key.indexOf(\'is\') === 0) {key = key.slice(2);}key = $this.formatRule(key, \'-\'); //将规则格式化为html中书写的形式rule = $input.data(__DEFAULT__.prefix + \'-\' + key); //获取规则的值errorMsg = $input.data(__DEFAULT__.prefix + \'-\' + key + \'-msg\'); //规则对应的提示信息//如果当前input有这个规则，则执行这个规则if(rule) {//执行规则测试是否通过var isPassed = fn.call($input, rule); //改变规则函数fn执行时候的this，指向当前input jquery对象if(!isPassed) {//未通过、则错误提示$this.showErrorTip.call($input, errorMsg);}}});});//绑定提交表单的事件this.on(\'submit\', function(e) {var isFormPassed = true;$this.$file.trigger($this.initEvent);$this.$file.each(function(index, current){var $current = $(current);if($current.siblings(\'.validate-error-tip\').is(\':visible\')){isFormPassed = false;return false;}});if(!isFormPassed) {return isFormPassed;}});};//扩展新的验证规则(实际上就是扩展上面__RULES__对象)$.fn[pluginName].addRule = function(options) {$.extend(__RULES__, options);}}, \'formValidate\');