当前位置: 代码迷 >> Web前端 >> jquery validate 表单印证
  详细解决方案

jquery validate 表单印证

热度:530   发布时间:2013-08-11 22:22:29.0
jquery validate 表单验证

使用 jquery.validate.js 进行表单验证,没有侵入性,简单方便。

?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" pageEncoding="UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + "" + (request.getServerPort() == 80 ? "" : ":" + request.getServerPort()) + path + "/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>手动设置参数页面</title>
    <style type="text/css">
        label {
            width:80px;
            display: inline-block;
        }
        em.error {
            width:300px;
            color:red;
            padding-left:10px;
        }
    </style>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#accyRFSalesSetting").validate({
                messages: {
                    weight: {
                        required:"RF权重值必填",
                        number:"必须是整数"
                    },
                    sales: {
                        required:"销量必填",
                        number:"必须是整数"
                    }
                },
                rules: {
                    weight: {
                        required:true,
                        number:true
                    },
                    sales: {
                        required:true,
                        number:true
                    }
                },
                errorElement:"em"
            });
        });
    </script>
</head>
<body>
    <form id="accyRFSalesSetting" action="/setting" method="post" >
        <fieldset>
            <legend>手机推荐配件条件设置,顺序RF优先,其次销量</legend>
            <div>
                <label for="weight">RF >= </label>
                <input id="weight" type="text" name="weight" value="${weight}"/>
            </div>
            <div>
                <label for="sales">Sales >= </label>
                <input id="sales" type="text" name="sales" value="${sales}"/>
            </div>
            <div>
                <label></label>
                <input type="submit" value="提交"><input type="reset" value="重置">
            </div>
        </fieldset>
    </form>
</body>
</html>

?

  相关解决方案