在jQuery验证中应用标准式方法从用户名和密码字段中的修剪空间进行修剪。但是,将结果发送回服务器的结果没有应用装饰。我知道我不应该假设,但这只是一个好奇的问题,这是预期的结果吗?
eg:使用引号用户名中的值:"测试"密码:" C F1234"
从控制台归一化后。log值为
用户名:"测试"密码:" C F1234"
但是使用
submitHandler
form.submit()
将值发送为 用户输入。
我是否错误地实现了?
$(document).ready(function(){
$("#login-form").validate({
rules: {
username:{
required:true,
normalizer:function(value){
console.log('user pre-trim:'+value);
console.log('user post-trim:'+$.trim(value));
return $.trim(value);
},
email:true,
},
password:{
required:true,
normalizer:function(value){
console.log('pwd pre-trim:'+value);
console.log('pwd post-trim:'+$.trim(value));
return $.trim(value);
},
},
},
errorContainer: "#errorMessageContainer",
errorLabelContainer: "#errorMessageContainer ul",
errorElement: "li",
messages: {
username:{
required:"Email cannot be left empty",
email:"Must be an Email address"
},
password: {
required: "Password Cannot Be Left Empty",
}
}
,
invalidHandler: function(form, validator) {
//Can something be done here?
console.log('invalidContainer');
},
submitHandler:
function(form) {
form.submit();
}
});
displayErrorContainer();
});
function displayErrorContainer(){
var child = $("#errorMessageContainer").children("ul").html();
console.log('ftn: msg displayErrorContainer:'+child);
if(typeof child !== "undefined" && child.length > 0){
//console.log("show the error-container");
$("#errorMessageContainer").show();
}else{
//console.log("hide the error-container");
$("#errorMessageContainer").hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<div id="errorMessageContainer">
<ul><li>Username and Password do not match</li></ul>
</div>
<form id="login-form" request="POST">
<input id="username" name="username" type="text" />
<input id="password" name="password" type="password" />
<button type="submit">Submit</button>
</form>
我是否错误地实现了?
阅读文档:" 不会更改元素的值,它仅更改用于验证的值。"
所以答案是'no'。