`
jiahh
  • 浏览: 37022 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery验证表单

 
阅读更多
1.<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 
2.<html> 
3.  <head> 
4.    <title>jquery验证框架</title> 
5.    <link rel="stylesheet" type="text/css" href="css/index.css"> 
6.    <script type="text/javascript" src=js/jquery-1.3.2.min.js></script> 
7.    <script type="text/javascript" src=js/jquery.validate.pack.js></script> 
8.    <script type="text/javascript" src=js/jquery.form.js></script> 
9.    <script type="text/javascript" src=js/valid.js></script> 
10.    <style type="text/css"> 
11.        label { width: 10em; float: left; }  
12.        label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}  
13.        input.haha { border: 1px solid red; }  
14.        label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}  
15.        input.focus { border: 2px solid green; }  
16.        ul li{ display: block;}  
17.    </style> 
18.  </head> 
19.    
20.  <body> 
21.    
22.  <div id="form_con"> 
23.        <form class="cmxform" id="myform" method="post" action=""> 
24.            <table cellspacing="0" cellpadding="0"> 
25.                <tbody> 
26.                    <tr> 
27.                        <td>用户名</td> 
28.                        <td><input type="text" name="username" class="required" /></td> 
29.                        <td></td> 
30.                    </tr> 
31.                    <tr> 
32.                        <td>密码</td> 
33.                        <td><input id="password" type="password" name="firstpwd" /></td> 
34.                        <td></td> 
35.                    </tr> 
36.                    <tr> 
37.                        <td>验证密码</td> 
38.                        <td><input type="password" name="secondpwd" /></td> 
39.                        <td></td> 
40.                    </tr> 
41.                    <tr> 
42.                        <td>性别</td> 
43.                        <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td> 
44.                        <td></td> 
45.                    </tr> 
46.                    <tr> 
47.                        <td>年龄</td> 
48.                        <td><input type="text" name="age" /></td> 
49.                        <td></td> 
50.                    </tr> 
51.                    <tr> 
52.                        <td>邮箱</td> 
53.                        <td><input type="text" name="email" /></td> 
54.                        <td></td> 
55.                    </tr> 
56.                    <tr> 
57.                        <td>个人网页</td> 
58.                        <td><input type="text" name="purl" /></td> 
59.                        <td></td> 
60.                    </tr> 
61.                    <tr> 
62.                        <td>电话</td> 
63.                        <td><input type="text" name="telephone" /></td> 
64.                        <td></td> 
65.                    </tr> 
66.                    <tr> 
67.                        <td>附件</td> 
68.                        <td><input type="file" name="afile"/></td> 
69.                        <td></td> 
70.                    </tr> 
71.                    <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr> 
72.                </tbody>            
73.            </table> 
74.        </form> 
75.  </div>    
76.  </body> 
77.</html> 
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
  <head>
    <title>jquery验证框架</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
    <script type="text/javascript" src=js/jquery.validate.pack.js></script>
    <script type="text/javascript" src=js/jquery.form.js></script>
    <script type="text/javascript" src=js/valid.js></script>
    <style type="text/css">
    label { width: 10em; float: left; }
label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
input.haha { border: 1px solid red; }
label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
input.focus { border: 2px solid green; }
ul li{ display: block;}
    </style>
  </head>
 
  <body>
 
  <div id="form_con">
  <form class="cmxform" id="myform" method="post" action="">
  <table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>验证密码</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody> 
  </table>
  </form>
  </div>
  </body>
</html>
[2] 验证js

Js代码
1.$(function(){  
2.    var validator = $("#myform").validate({  
3.        debug: true,       //调试模式取消submit的默认提交功能  
4.        errorClass: "haha",//默认为错误的样式类为:error  
5.        focusInvalid: false,  
6.        onkeyup: false,  
7.        submitHandler: function(form){   //表单提交句柄,为一回调函数,带一个参数:form  
8.            alert("提交表单");  
9.            //form.submit();   提交表单  
10.        },  
11.        rules: {           //定义验证规则,其中属性名为表单的name属性  
12.            username: {  
13.                required: true,  
14.                minlength: 2,  
15.                remote: "uservalid.jsp"  //传说当中的ajax验证  
16.            },  
17.            firstpwd: {  
18.                required: true,  
19.                //minlength: 6  
20.                rangelength: [6,8]  
21.            },  
22.            secondpwd: {  
23.                required: true,  
24.                equalTo: "#password" 
25.            },  
26.            sex: {  
27.                required: true 
28.            },  
29.            age: {  
30.                required: true,  
31.                range: [0,120]  
32.            },  
33.            email: {  
34.                required: true,  
35.                email: true 
36.            },  
37.            purl: {  
38.                required: true,  
39.                url: true 
40.            },  
41.            afile: {  
42.                required: true,  
43.                accept: "xls,doc,rar,zip" 
44.            }  
45.        },  
46.        messages: {       //自定义验证消息  
47.            username: {  
48.                required: "用户名是必需的!",  
49.                minlength: $.format("用户名至少要{0}个字符!"),  
50.                remote: $.format("{0}已经被占用")  
51.            },  
52.            firstpwd: {  
53.                required: "密码是必需的!",  
54.                rangelength: $.format("密码要在{0}-{1}个字符之间!")  
55.            },  
56.            secondpwd: {  
57.                required: "密码验证是必需的!",    
58.                equalTo: "密码验证需要与密码一致" 
59.            },  
60.            sex: {  
61.                required: "性别是必需的" 
62.            },  
63.            age: {  
64.                required: "年龄是必需的",  
65.                range: "年龄必须介于{0}-{1}之间" 
66.            },  
67.            email: {  
68.                required: "邮箱是必需的!",  
69.                email: "请输入正确的邮箱地址(例如 myemail@163.com)" 
70.            },  
71.            purl: {  
72.                required: "个人主页是必需的",  
73.                url: "请输入正确的url格式,如 http://www.domainname.com" 
74.            },  
75.            afile: {  
76.                required: "附件是必需的!",  
77.                accept: "只接收xls,doc,rar,zip文件" 
78.            }  
79.        },  
80.        errorPlacement: function(error, element) {  //验证消息放置的地方  
81.            error.appendTo( element.parent("td").next("td") );  
82.        },  
83.        highlight: function(element, errorClass) {  //针对验证的表单设置高亮  
84.            $(element).addClass(errorClass);  
85.        },  
86.        success: function(label) {    
87.                    label.addClass("valid").text("Ok!")    
88.            }    
89.          
90.        /*, 
91.        errorContainer: "#error_con",               //验证消息集中放置的容器 
92.        errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器 
93.        wrapper: "li",                              //将验证消息用无序列表包围 
94.        validClass: "valid",                        //通过验证的样式类 
95.        errorElement: "em",                         //验证标签的名称,默认为:label 
96.        success: "valid"                            //验证通过的样式类 
97.        */ 
98.    });  
99.    $("button").click(function(){  
100.        validator.resetForm();  
101.    });  
102.    //alert($("#password").rules()["required"]);  
103.    //validator.showErrors({"username": "用户名是必需的"});  
104.    /*$("button").click(function () { 
105.        var str = "Hello {0}, this is {1}"; 
106.        alert("'" + str + "'"); 
107.        str = $.validator.format(str, ["koala","oo"]); 
108.        alert("'" + str + "'"); 
109.    });*/ 
110.              
111.});  
$(function(){
var validator = $("#myform").validate({
debug: true,       //调试模式取消submit的默认提交功能
errorClass: "haha",//默认为错误的样式类为:error
focusInvalid: false,
onkeyup: false,
submitHandler: function(form){   //表单提交句柄,为一回调函数,带一个参数:form
alert("提交表单");
//form.submit();   提交表单
},
rules: {           //定义验证规则,其中属性名为表单的name属性
username: {
required: true,
minlength: 2,
remote: "uservalid.jsp"  //传说当中的ajax验证
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6,8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0,120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: {       //自定义验证消息
username: {
required: "用户名是必需的!",
minlength: $.format("用户名至少要{0}个字符!"),
remote: $.format("{0}已经被占用")
},
firstpwd: {
required: "密码是必需的!",
rangelength: $.format("密码要在{0}-{1}个字符之间!")
},
secondpwd: {
required: "密码验证是必需的!",
equalTo: "密码验证需要与密码一致"
},
sex: {
required: "性别是必需的"
},
age: {
required: "年龄是必需的",
range: "年龄必须介于{0}-{1}之间"
},
email: {
required: "邮箱是必需的!",
email: "请输入正确的邮箱地址(例如 myemail@163.com)"
},
purl: {
required: "个人主页是必需的",
url: "请输入正确的url格式,如 http://www.domainname.com"
},
afile: {
required: "附件是必需的!",
accept: "只接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) {  //验证消息放置的地方
    error.appendTo( element.parent("td").next("td") );
    },
    highlight: function(element, errorClass) {  //针对验证的表单设置高亮
    $(element).addClass(errorClass);
    },
    success: function(label) { 
                 label.addClass("valid").text("Ok!") 
   } 
   
    /*,
    errorContainer: "#error_con",               //验证消息集中放置的容器
    errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器
    wrapper: "li", //将验证消息用无序列表包围
    validClass: "valid", //通过验证的样式类
    errorElement: "em", //验证标签的名称,默认为:label
    success: "valid" //验证通过的样式类
    */
});
$("button").click(function(){
validator.resetForm();
});
//alert($("#password").rules()["required"]);
//validator.showErrors({"username": "用户名是必需的"});
/*$("button").click(function () {
    var str = "Hello {0}, this is {1}";
    alert("'" + str + "'");
    str = $.validator.format(str, ["koala","oo"]);
    alert("'" + str + "'");
    });*/

});

[3] 远程验证程序

Java代码
1.<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%  
2.    String username = request.getParameter("username");  
3.    PrintWriter pw = response.getWriter();  
4.    try{  
5.        if(username.toLowerCase().equals("admin")){  
6.            pw.println("true");  
7.        }else{  
8.            pw.println("false");  
9.        }  
10.    }catch(Exception ex){  
11.        ex.getStackTrace();  
12.    }finally{  
13.        pw.flush();  
14.        pw.close();  
15.    }  
16.%> 
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
String username = request.getParameter("username");
PrintWriter pw = response.getWriter();
try{
if(username.toLowerCase().equals("admin")){
pw.println("true");
}else{
pw.println("false");
}
}catch(Exception ex){
ex.getStackTrace();
}finally{
pw.flush();
pw.close();
}
%>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics