基于Layui Form改写的JavaScript表单验证插件

  1 /**
  2  * @name mrc 2018-4-6
  3  * @description 表单校验 依赖Jq 改写自layui form
  4  */
  5 ;!function($) {
  6     "use strict";
  7     var MOD_NAME = 'form';
  8     var ELEM = '.mrc-form';
  9     var eventConfig = {
 10      event: {} //记录模块自定义事件
 11   }
 12     var Form = function() {
 13         this.config = {
 14             verify: {
 15                 required: [
 16                     /[\S]+/, '必填项不能为空'
 17                 ],
 18                 phone: [
 19                     /^1\d{10}$/, '请输入正确的手机号'
 20                 ],
 21                 email: [
 22                     /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, '邮箱格式不正确'
 23                 ],
 24                 url: [
 25                     /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, '链接格式不正确'
 26                 ],
 27                 number: function(value) {
 28                     if(!value || isNaN(value)) return '只能填写数字'
 29                 },
 30                 date: [
 31                     /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, '日期格式不正确'
 32                 ],
 33                 identity: [
 34                     /(^\d{15}$)|(^\d{17}(x|X|\d)$)/, '请输入正确的身份证号'
 35                 ]
 36             }
 37         };
 38     };    
 39     //基础功能
 40     var baseTool = function() {
 41         //遍历
 42         this.each=function(obj, fn) {
 43                 var key, that = this;
 44                 if(typeof fn !== 'function') return that;
 45                 obj = obj || [];
 46                 if(obj.constructor === Object) {
 47                     for(key in obj) {
 48                         if(fn.call(obj[key], key, obj[key])) break;
 49                     }
 50                 } else {
 51                     for(key = 0; key < obj.length; key++) {
 52                         if(fn.call(obj[key], key, obj[key])) break;
 53                     }
 54                 }
 55                 return that;
 56             },
 57         //获取设备信息
 58         this.device=function(key) {
 59                 var agent = navigator.userAgent.toLowerCase()
 60                     ,getVersion = function(label) {
 61                         var exp = new RegExp(label + '/([^\\s\\_\\-]+)');
 62                         label = (agent.match(exp) || [])[1];
 63                         return label || false;
 64                     }
 65                     //返回结果集                    
 66                     ,result = {
 67                         //底层操作系统
 68                         os: function() { 
 69                             if(/windows/.test(agent)) {
 70                                 return 'windows';
 71                             } else if(/linux/.test(agent)) {
 72                                 return 'linux';
 73                             } else if(/iphone|ipod|ipad|ios/.test(agent)) {
 74                                 return 'ios';
 75                             } else if(/mac/.test(agent)) {
 76                                 return 'mac';
 77                             }
 78                         }()
 79                         //ie版本
 80                         ,ie: function() { 
 81                             return(!!window.ActiveXObject || "ActiveXObject" in window) ? (
 82                                 (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识
 83                             ) : false;
 84                         }()
 85                         //是否微信
 86                         ,weixin: getVersion('micromessenger') 
 87                     };
 88                 //任意的key
 89                 if(key && !result[key]) {
 90                     result[key] = getVersion(key);
 91                 }
 92                 //移动设备
 93                 result.android = /android/.test(agent);
 94                 result.ios = result.os === 'ios';
 95                 return result;
 96             }
 97     }
 98     var basetool=new baseTool();    
 99     var device=basetool.device();   
100     //模块事件
101     var eventDefined=function(){        
102         this.event = function(modName, events, params){
103                 var that = this
104                 ,result = null
105                 ,filter = events.match(/\(.*\)$/)||[] //提取事件过滤器
106                 ,set = (events = modName + '.'+ events).replace(filter, '') //获取事件本体名
107                 ,callback = function(_, item){
108                   var res = item && item.call(that, params);
109                   res === false && result === null && (result = false);
110                 };
111                 basetool.each(eventConfig.event[set], callback);
112                 filter[0] && basetool.each(eventConfig.event[events], callback); //执行过滤器中的事件
113                 return result;
114               },
115         this.onevent = function(modName, events, callback){
116                 if(typeof modName !== 'string' 
117                 || typeof callback !== 'function') return this;
118                 eventConfig.event[modName + '.' + events] = [callback];   
119                 return this;
120               }
121     }    
122     var eventdefined=new eventDefined();    
123     //全局设置
124     Form.prototype.set = function(options) {
125         var that = this;
126         $.extend(true, that.config, options);
127         return that;
128     };
129     //验证规则设定
130     Form.prototype.verify = function(settings) {
131         var that = this;
132         $.extend(true, that.config.verify, settings);
133         return that;
134     };
135     //表单事件监听
136     Form.prototype.on = function(events, callback) {
137         return eventdefined.onevent.call(this, MOD_NAME, events, callback);
138     };
139     //表单提交校验
140     var submit = function() {
141         var button = $(this),
142             verify = form.config.verify,
143             stop = null,
144             DANGER = 'mrc-form-danger',
145             field = {},
146             elem = button.parents(ELEM)
147 
148             ,
149             verifyElem = elem.find('*[mrc-verify]') //获取需要校验的元素
150             ,
151             formElem = button.parents('form')[0] //获取当前所在的form元素，如果存在的话
152             ,
153             fieldElem = elem.find('input,select,textarea') //获取所有表单域
154             ,
155             filter = button.attr('mrc-filter'); //获取过滤器
156             var eventlist=[];
157         //开始校验
158         basetool.each(verifyElem, function(_, item) {
159             var othis = $(this),
160                 vers = othis.attr('mrc-verify').split('|')
161                 ,verType = othis.attr('mrc-verType')
162                 ,value = othis.val();                
163             othis.removeClass(DANGER);
164             basetool.each(vers, function(_, thisVer) {
165                 var isTrue //是否命中校验
166                     , errorText = '' //错误提示文本
167                     ,isFn = typeof verify[thisVer] === 'function';
168                 //匹配验证规则
169                 if(verify[thisVer]) {
170                     var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);
171                     errorText = errorText || verify[thisVer][1];
172                     //如果是必填项或者非空命中校验
173                     if(isTrue) 
174                     {
175                         var em={elem:othis,msg:errorText};
176                         eventlist.push(em);
177                         if(!device.android && !device.ios) item.focus(); //非移动设备自动定位焦点
178                         othis.addClass(DANGER);
179                         return stop = true;
180                     }
181                 }
182             });
183             if(stop) return stop;
184         });
185         if(stop)
186         {
187         //获取字段
188         return eventdefined.event.call(this, MOD_NAME, 'submit(' + filter + ')', {
189             eventlist:eventlist
190         //return false;
191         });
192         }
193         var nameIndex = {}; //数组 name 索引
194         basetool.each(fieldElem, function(_, item) {
195             item.name = (item.name || '').replace(/^\s*|\s*&/, '');
196 
197             if(!item.name) return;
198 
199             //用于支持数组 name
200             if(/^.*\[\]$/.test(item.name)) {
201                 var key = item.name.match(/^(.*)\[\]$/g)[0];
202                 nameIndex[key] = nameIndex[key] | 0;
203                 item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']');
204             }
205 
206             if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
207             field[item.name] = item.value;
208         });
209         //获取字段
210         return eventdefined.event.call(this, MOD_NAME, 'submit(' + filter + ')', {
211             elem: this,
212             form: formElem,
213             field: field,
214             eventlist:eventlist
215         });
216     };
217     //实例化
218     var form = new Form(),dom = $(document);
219     //表单提交事件
220     dom.on('submit', ELEM, submit)
221        .on('click', '*[mrc-submit]', submit);
222     //暴露模块
223     window.mrcForm = form;
224 }(jQuery);

HTML Demo

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8" />
        <title></title>
    
    </head>
    <body>
        <p>表单1（验证消息打印在控制台）</p>
        <form class="mrc-form">
                <input type="text" name="title"  mrc-verify="required|email" placeholder="请输入邮箱">
                <input type="text" name="password"   mrc-verify="required|number" placeholder="请输入数字">                
                <button  mrc-submit mrc-filter="formDemo">立即提交</button>
        </form>    
        <p>表单2（验证消息打印在控制台）</p>
       <form class="mrc-form">
                <input type="text" name="title" mrc-verify="required|number" placeholder="请输入数字">
                <button mrc-submit mrc-filter="formDemo2">立即提交</button>
        </form>    
    </body>
</html>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/Verify.js" ></script>
<script type="text/javascript">
 mrcForm.on('submit(formDemo)',function(data){       
    console.log(data.eventlist[0].msg);//验证错误消息
    console.log(data.eventlist[0].elem);//验证不通过的元素 相当于 document.getElementById(id)
    return false;
  });
  
   mrcForm.on('submit(formDemo2)',function(data){
    console.log(data); //打印返回对象
    return false;
   });  
</script>

使用介绍

由于项目中经常用到表单验证而且当项目中整体框架用了某一个框架之后如果再引用其他框架可能存在其他问题而如果在页面直接写验证的话每次都要写相同的代码想想就非常的蛋疼程序员当然要想着怎么偷懒了能不动手那肯定就不动手啊

自己写个吧感觉已经有轮子了总是造别人的轮子干嘛（咳咳其实是基础差又懒罢了）而且之前接触layui 发现他的表单带有验证功能而且又是开源的那肯定搞起啊于是就稍稍的改了一写勉强能用用吧

这个要依赖于jq 当然里面用到的jq功能也不多就几个小地方有兴趣的可以自行改造一下只需标明原出处是layui就行了开源精神还是要遵循的嘛

插件暴露给外部一个mrcForm对象

  mrcForm.on('submit(formDemo2)',function(data){  
    console.log(data); //打印返回对象 
    return false;
   });

formDemo2 为提交按钮上加的属性

    <button mrc-submit mrc-filter="formDemo2">立即提交</button>


mrc-verify="required|email"  这个是加的验证规则 用|符号分隔 可在代码里自行加其他的验证规则

        <input type="text" name="password"   mrc-verify="required|number" placeholder="请输入数字">

然后就没有然后了。。。。。。。。。。。。。。。。。。。。。。。。。。。。听说窃什么格瓦拉出来了我要下去看看电车电瓶还在么。。。

posted @ 2018-04-08 11:11 锋栾阅读(299) 评论(0) 收藏举报

刷新页面返回顶部

锋栾

基于Layui Form改写的JavaScript表单验证插件

HTML Demo

使用介绍

然后就没有然后了。。。。。。。。。。。。。。。。。。。。。。。。。。。。听说窃什么格瓦拉出来了 我要下去看看电车电瓶还在么。。。

公告

然后就没有然后了。。。。。。。。。。。。。。。。。。。。。。。。。。。。听说窃什么格瓦拉出来了我要下去看看电车电瓶还在么。。。