[js组件] 表单验证

 index.html 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>validatior demo</title>
 6 <style>
 7 </style>
 8 </head>
 9 <body>
10     <div style="height: 300px; overflow: auto;">
11         <h1>使用规范</h1>
12         <ol>
13             <li>必须引入jquery</li>
14             <li>可以使用input和textarea两种标签</li>
15             <li>input标签推荐使用type=text的</li>
16             <li>标签中添加的类的说明
17                 <ul>
18                     <li>va-text:验证文本是否为空</li>
19                     <li>va-email:验证邮箱是否为空，格式是否正确</li>
20                     <li>va-number:验证数字是否为空，格式是否正确</li>
21                     <li>va-content:验证内容是否为空，用于texteara</li>
22                 </ul>
23             </li>
24             <li>在引入jquery之后，在引入validatior-1.js文件</li>
25             <li>validatior的初始化<br/>
26                 <pre>
27                     <code>
28 var validatior = new Validatior({
29     "formId": "form1"
30 });
31                     </code>
32                 </pre>
33             </li>
34             <li><a href="validatior-1.js" target="_blank">点击查看validator</a></li>
35         </ol>
36     </div>
37 
38     <form id="form1" class="va-from" action="#">
39         <table>
40             <tr>
41                 <td>用户名：</td>
42                 <td><input type="text" name="username" class="va-text bb"/></td>
43                 <td></td>
44             </tr>
45             <tr>
46                 <td>邮箱：</td>
47                 <td><input type="text" name="email" class="aa va-email" /></td>
48                 <td></td>
49             </tr>
50             <tr>
51                 <td>qq：</td>
52                 <td><input type="text" name="qq" class="va-number" /></td>
53                 <td></td>
54             </tr>
55             <tr>
56                 <td>家庭住址：</td>
57                 <td><input type="text" name="address" class="va-text" /></td>
58                 <td></td>
59             </tr>
60             <tr>
61                 <td>内容：</td>
62                 <td><textarea name="content" class="va-content" ></textarea></td>
63                 <td></td>
64             </tr>
65             <tr>
66                 <td><input type="submit" value="提交" class="va-submit"/></td>
67                 <td><input type="reset" value="重置" class="va-reset"/></td>
68                 <td></td>
69             </tr>
70         </table>
71     </form>
72 </body>
73 </html>
74 
75 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
76 <script type="text/javascript" src="validatior.js"></script>
77 <script type="text/javascript">
78     var validatior = new Validatior({
79         "formId": "form1"
80     });
81 </script>

 

 

validatior.js 

  1 function Validatior() {
  2     this._init.apply(this, arguments);
  3 }
  4 
  5 Validatior.prototype = {
  6     _init: function(options) {
  7         this.formId = options.formId;
  8         this.validation();
  9     },
 10 
 11     validation: function() {
 12         var self = this;
 13         $("#" + this.formId).submit(function() {
 14             return self.SubmitValid();
 15         });
 16 
 17         $(".va-text").blur(function() {
 18             self.validText(this);
 19         });
 20 
 21         $(".va-email").blur(function() {
 22             self.validEmail(this);
 23         });
 24 
 25         $(".va-number").blur(function() {
 26             self.validNumber(this);
 27         });
 28 
 29         $(".va-content").blur(function() {
 30             self.validContent(this);
 31         });
 32     },
 33 
 34     SubmitValid: function() {
 35         var self = this;
 36         var temp = '';
 37         try{
 38             var validinput = $("#" + this.formId + " :input");
 39             var j = 0;
 40             validinput.each(function(){
 41                 var attr = $(this).attr("class");
 42                 var dqinput = validinput.eq(j++);        //当前input
 43 
 44                 if (attr.indexOf("va-text") >= 0) {
 45                     self.validText(dqinput);
 46                     temp += dqinput.next('.va-label').html();
 47                 } else if (attr.indexOf("va-email") >= 0) {
 48                     self.validEmail(dqinput);
 49                     temp += dqinput.next('.va-label').html();
 50                 } else if (attr.indexOf("va-number") >= 0) {
 51                     self.validNumber(dqinput);
 52                     temp += dqinput.next('.va-label').html();
 53                 } else if (attr.indexOf("va-content") >= 0) {
 54                     self.validContent(dqinput);
 55                     temp += dqinput.next('.va-label').html();
 56                 }
 57 
 58             });
 59         }catch(e){
 60             alert(e);
 61             $temp = "false";    //防止异常出现继续提交
 62         }
 63 
 64         if ($.trim(temp)) {
 65             return false;
 66         }
 67 
 68         return true;
 69     },
 70 
 71     validText: function(dom) {
 72         var textLabel = $(dom).next('.va-label');
 73         if (textLabel.length == '0') {
 74             $(dom).after('<label class="va-label"></label>');
 75         }
 76         textLabel = $(dom).next('.va-label');
 77 
 78         var text = $.trim($(dom).val());
 79         if (text) {
 80             textLabel.html('');
 81         } else {
 82             textLabel.html('请填写信息');
 83         }
 84     },
 85 
 86     validEmail: function(dom) {
 87         var emailLabel = $(dom).next('.va-label');
 88         if (emailLabel.length == '0') {
 89             $(dom).after('<label class="va-label"></label>');
 90         }
 91         emailLabel = $(dom).next('.va-label');
 92 
 93         var email = $.trim($(dom).val());
 94         if (email) {
 95             if(!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
 96                 emailLabel.html("格式不正确！请重新输入");
 97             } else {
 98                 emailLabel.html('');
 99             }
100         } else {
101             emailLabel.html('请填写邮箱地址');
102         }
103     },
104 
105     validNumber: function(dom) {
106         var numberLabel = $(dom).next('.va-label');
107         if (numberLabel.length == '0') {
108             $(dom).after('<label class="va-label"></label>');
109         }
110         numberLabel = $(dom).next('.va-label');
111 
112         var number = $.trim($(dom).val());
113         if (number) {
114             if(!number.match(/^[0-9]*$/)) {
115                 numberLabel.html("格式不正确！请重新输入");
116             } else {
117                 numberLabel.html('');
118             }
119         } else {
120             numberLabel.html('请填写数字');
121         }
122     },
123 
124     validContent: function(dom) {
125         var contentLabel = $(dom).next('.va-label');
126         if (contentLabel.length == '0') {
127             $(dom).after('<label class="va-label"></label>');
128         }
129         contentLabel = $(dom).next('.va-label');
130 
131         var content = $.trim($(dom).val());
132         if (content) {
133             contentLabel.html('');
134         } else {
135             contentLabel.html('请填写内容');
136         }
137     }
138 };

 

　　花了两天的时间写的😳，第一次写组件，感觉里面的路子有点野啊！this用的我都晕了，还好有前端的同事指导我。感觉很幸运我能进ths，里面的同事，很多的学习资源，联系的项目。对于现在的我感觉异常的宝贵。其实还是很想转前端的，哈哈。报了一个网易前端的课。试试水深。

 

posted @ 2016-06-28 21:08  Kuckboy_shan  阅读(467)  评论(2)  编辑  收藏  举报