jquery验证表单

jiahh

浏览: 38574 次
性别:
来自: 南京

最近访客更多访客>>

772191140

锋之弥漫

才才才

王王王王

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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();
}
%>

分享到：