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_-])[email protected]([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 };
时间： 2025-01-15 04:42:08