Angularjs表单验证消息必须始终在给定网页上以法语显示。它们在法语浏览器中正确显示，但在英语浏览器中无法显示。
我不想在后一种情况下检测语言环境，这对我的需求是不正确的。相反，我想告诉JavaScript这个页面/浏览器是法语。我也不想在JavaScript中动态地在客户端切换语言。
我尝试用这种方式修改HTTP标头：
<%@ page import="java.util.Locale" %>
<%
Locale locale = new Locale("fr","ca");
response.setLocale(locale);
response.setHeader("Content-Language", "fr");
response.setHeader("Language", "fr");
%>
但它似乎不起作用。
提前感谢您的帮助。
答案 0 :(得分：0)
我通过用我自己的JS代码替换angularjs来解决这个问题。方法是相同的，循环遍历JavaScript中的所有HTML输入标记，然后搜索自定义属性。如果有，请根据html标记的lang属性更改语言。希望这对某人有帮助。
网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LGS Test Java Login</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.panel-info
{
border-color: #5F4793;
}
.panel-info > .panel-heading
{
color: #ffffff;
background-color: #5F4793;
border-color: #5F47931;
}
.btn-primary
{
color: #fff;
background-color: #5F4793;
border-color: #5F4793;
}
.btn-primary:hover
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:focus,
.btn-primary.focus
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus
{
color: #fff;
background-color: #4c0080;
border-color: #4c0080;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center; color:#5F4793;">Test</h1>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div id="panel-heading" class="panel- heading">Connectez-vous !</div>
<div id="messages"></div>
<div class="panel-body" >
<form name="loginForm" id="loginForm" method="post" action="loginServlet">
<div class="form-group">
<div class="input-group" id="div1">
<input type="email" bert="required email" class="form-control" id="myLogin" name="uLogin" placeholder="Votre courriel"
style="position: relative; top: 1px;" data-toggle="tooltip" data-placement="left" title="">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user" style="position: relative; top: 1px;"> </label>
</div>
</div>
<div class="form-group">
<div class="input-group" id="div2">
<input type="password" bert="required" class="form-control" id="myPassword" name="uPassword"
style="position: relative; top: 1px;" placeholder="Votre mot de passe" data-toggle="tooltip" data-placement="bottom" title="">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-lock" style="position: relative; top: 1px;"></label>
</div>
</div>
<div>
<input id="myBtn" class="btn btn-primary pull-right" type="button" value="Connectez"></a>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
</div>
</div> <!-- row -->
</div> <!-- container -->.
<script src="js/bertrand.js"></script>
</body>
</html>
和bertrand.js文件：
/*
Small footprint JavaScript library inspired by AngularJS that allows better control of the bootstrap tooltip message wording.
Depends on: bootstrap.js, required to be placed at bottom of HTML, has to do with DOM loading.
Contrary to AngularJS, does not rely on browser language to determine validation message language, uses html tag's lang attribute value.
*/
setTimeout(function(){ document.getElementById("myBtn").addEventListener("click",validateForm); }, 500);
/* BEGIN BLOCK
get page language from html tag; this works around AngularJS bug as described at:
http://stackoverflow.com/questions/38460174/how-can-i-force-a-page-language-from-servlet-or-jsp-so-angularjs-will-pick-it-up
*/
var mylanguage = "fr";
var myhtmlelement = document.getElementsByTagName("html");
for (var i = 0; i < myhtmlelement.length; i++) /* we should have only one of course */
{
var attrib = myhtmlelement[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
if (attrib[x].name === 'lang')
{
mylanguage = attrib[x].value;
}
}
}
/* END BLOCK */
setTimeout(adaptPlaceholder(mylanguage), 500);
var whitespace = " \t\n\r";
function isEmpty(s)
{ return ((s == null) || (s.length == 0));
}
// Returns true if string s is empty or whitespace characters only.
function isWhitespace(s)
{
var i;
// Is s empty?
if (isEmpty(s)) return true;
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (whitespace.indexOf(c) == -1) return false;
}
return true;
}
function isEmail(s)
{
if (isWhitespace(s)) return false;
var i = 1;
var sLength = s.length;
while ((i < sLength) && (s.charAt(i) != "@"))
{
i++;
}
if ((i >= sLength) || (s.charAt(i) != "@")) return false;
else i += 2;
while ((i < sLength) && (s.charAt(i) != "."))
{
i++;
}
if ((i >= sLength - 1) || (s.charAt(i) != ".")) return false;
else return true;
}
function validateForm()
{
var elements = document.getElementsByTagName("input");
var shipthis = true;
for (var i = 0; i < elements.length; i++)
{
var attrib = elements[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
/* find tags with custom attribute "bert" in them */
if (attrib[x].name === 'bert')
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-error").addClass("input-group has-success");
if(attrib[x].value.indexOf('email') > -1)
{
if(!isEmail(elements[i].value))
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-success").addClass("input-group has-error");
for (var z = 0; z < attrib.length; z++)
{
// add supported translations here, or default to French:
if (attrib[z].name === 'title')
{
if(mylanguage == "en")
{
attrib[z].value = "Please enter a valid email address here";
}
else
{
attrib[z].value = "SVP modifier pour une adresse de courriel valide";
}
}
}
$(elements[i]).tooltip('show');
shipthis = false;
}
}
if( attrib[x].value.indexOf('required') > -1 )
{
if(isEmpty(elements[i].value))
{
$(elements[i]).closest('div').removeClass("input-group").removeClass("has-success").addClass("input-group has-error");
for (var y = 0; y < attrib.length; y++)
{
if (attrib[y].name === 'title')
{
// add supported translations here, or default to French:
if(mylanguage == 'en')
{
attrib[y].value = "Please add a value here";
}
else
{
attrib[y].value = "SVP ajouter une valeur ici";
}
}
}
$(elements[i]).tooltip('show');
shipthis = false;
}
}
}
} /* end for get attributes in elements */
} /* end for get elements with input tag */
if(shipthis)
{
var myform = document.getElementsByTagName("form");
myform[0].submit();
}
}
function adaptPlaceholder(mylanguage)
{
if(mylanguage == "en")
{
var el = document.getElementsByTagName('input');
for (var i = 0; i < el.length; i++)
{
var attrib = el[i].attributes;
for (var x = 0; x < attrib.length; x++)
{
if(el[i].type == "email")
{
if (attrib[x].name == "placeholder")
{
attrib[x].value = "Your email address";
}
}
else if(el[i].type == "password")
{
if (attrib[x].name == "placeholder")
{
attrib[x].value = "Your password";
}
}
else if(el[i].type == "button")
{
if (attrib[x].name == "value")
{
attrib[x].value = "Connect";
}
}
}
}
document.getElementById("panel-heading").innerHTML = 'Connect !';
}
}