jquery validate 表单验证

最新推荐文章于 2024-10-03 10:12:38 发布

原创最新推荐文章于 2024-10-03 10:12:38 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery validate 表单验证

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用jQuery.validate.js插件实现网页表单验证的方法。通过具体实例展示了如何设置验证规则及错误提示信息，确保用户输入符合要求。

使用 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>