以前用惯了JavaScript的验证,现在又学会了JQuery的验证

验证的规则:

$("#form1").validate({
                    errorLabelContainer: $("#form1 div.error"),
                    rules: {
                            confirm: {
                            required: true,
                            equalTo: "#newPassword"
                            },
                            newPassword:{
                            required:true
                            },
                            oldPassword:{
                            required:true
                            }
                        },
                    messages: {
                        confirm: {
                        required: "请填写确认密码",
                        equalTo: "两次输入密码不一致"
                        },
                        newPassword:{
                        required:"请填写新密码",
                        },
                        oldPassword:{
                        required:"请填写原始密码"
                        }
                    }
                });

在页面中加入laber.error

 <style>
 label.error {
    display: block;
    margin-left: 1em;
    width: auto;
    color: red;
}
</style>

在jsp中的body中加入

 <div class="error">
                </div>

全部代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="user" value="${sessionScope.CURRENT_USER}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/oaCss.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/styles.css" rel="stylesheet">
<title></title>
</head>
<body>
 <style>
 label.error {
    display: block;
    margin-left: 1em;
    width: auto;
    color: red;
}
</style>
       <div
                        }
                    }
                });
    
});
</script>
</html>

相关文章:

  • 2021-08-07
  • 2021-08-07
  • 2021-10-03
  • 2021-06-09
  • 2021-06-14
猜你喜欢
  • 2021-09-26
  • 2021-12-20
  • 2021-11-07
  • 2022-12-23
相关资源
相似解决方案