标签：
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>
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 };
标签：
原文地址：http://www.cnblogs.com/KuckBoy-shan/p/5625013.html
