<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery数据校验插件开发</title> <link href="https://www.jb51.net/css/register.css" /> <link href="https://www.jb51.net/css/validate.css" /> </head> <body> <main> <section> <form method="post" action="result.html" ac> <div> <div> <ul> <li> <label for="username">用户名：</label> <input type="text" tabindex="1" 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" tabindex="2" 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" tabindex="3" 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" tabindex="4" 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" tabindex="5" 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" tabindex="6" 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="注册" tabindex="7"> </li> </ul> </div> </div> </form> </section> </main> <script src="https://www.jb51.net/js/jquery2.0.js"></script> <script src="https://www.jb51.net/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> </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字符开头、则去掉is if(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');
