jquery之表单验证(表单验证之使用正则表达式验证字段)--利用RegExp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>表单验证之使用正则表达式验证字段</title>
 8         <style type="text/css">
 9             .label {float:left; width:120px;}
10             .infobox {width: 200px; }
11             .error {color:red; padding-left: 10px;}
12             .submit {margin-left: 125px; margin-top: 10px; }
13         </style>
14         <script src="jquery-1.5.2.js" type="text/javascript"></script>
15         <script type="text/javascript">
16             $(document).ready(function(){
17                 $('.error').hide();
18                 $('.submit').click(function(event) {
19                     var data = $('.infobox').val();
20                     if(validate_phoneno(data)){
21                         $('.error').hide();
22                     }
23                     else {
24                         $('.error').show();
25                         event.preventDefault();    
26                     }
27                 });
28             });
29             function validate_phoneno(ph) {
30                 var pattern = new RegExp(/^[0-9-+]+$/);
31                 //年份正则表达式 /\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/
32                 //\b在正则表达式的开头和结尾，表示单词边界，即单词必须与模式完全匹配
33                 return pattern.test(ph);
34             }
35         </script>
36         <body>
37             <form id="signup" method="post" action="">
38                 <div>
39                     <span class="label">Phone Number *</span>
40                     <input type="text" class="infobox" name="userid" />
41                     <span class="error">Check the format of phone number!</span>
42                 </div>
43                 <input class="submit" type="submit" value="submit" />
44             </form>
45         </body>
46 </html>
posted on 2017-01-18 00:24 Sharpest 阅读(344) 评论(0) 收藏举报