如果用户验证失败，如何避免JavaScript清除表单数据

How to avoid JavaScript from clearing form data if user fails validation?

本文关键字：JavaScript 清除表单数据何避免用户验证失败如果更新时间：2023-09-26

如果用户在输入框中输入超过20个字符，下面的JavaScript代码将刷新html页面。然而，我不希望输入框的内容被清除，我希望他们留在输入框中，即使用户验证失败。除了在表单中使用OnSubmit之外，有没有办法避免页面清除数据?

<form >
Enter your e-mail address:   <input type="email" name="email" id="email">
Enter your Name/Username :  <input type="text" name="username" id="username"></br>
<input type="submit" name="submit" value="Register" onclick="validate()">  
</form>

.

function validate(){
 var x= document.getElementById("email").value;
 var y= document.getElementById("username").value;      
 var n =y.length;  

if(n > 20){
alert("Oops Username Greater than 20 characters ");
}
else{
// redirecting to a diffrent page
}

您可以通过ajax而不是表单post提交表单。ajax调用不会更改页面内容，因此，如果表单没有通过服务器上的验证，您仍然拥有用户输入的所有表单元素。如果ajax调用成功，可以重定向到另一个页面。

如果表单中存在错误，则将用户的值存储在变量中，并使用getElementById("elementName").value=variableName;这将使它持久

您需要使用持久存储解决方案，例如cookie或userdata。Userdata更容易操作，可以存储比cookie更多的东西。
这是我如何设置，获取和删除userdata:

代码:

function DATAget(name){return JSON.parse(localStorage.getItem(name));}//load[name]
function DATAset(name,value){localStorage.setItem(name, JSON.stringify(value));}//save[name,value]
function DATAdel(name){localStorage.removeItem(name);}//delete[name]

用法:

DATAset("username", $('#username').val()); //set username
$('#username').val(DATAget("username")); // retrieve username

希望能有所帮助

在输入框中使用"onChange"方法

&lt;input type="text" name="username" id="username" onChange="isLessThen20()"&gt;

& lt; script>
函数isLessThen20() {
var y = document.getElementById("username");
Var n = y;
如果(n> 20) {
alert("哎呀，用户名大于20个字符");
}
其他{
//重定向到其他页面
}

& lt; script>