下面是用javascript写的一个非常简单的表单验证,亲们一起学习下吧!
div会另起一行显示,而span因为是行内快所以会和文本框在同一行显示.
<html>
<head>
<title>FormTest1</title>
<script language="javascript">
function validateData(){
if(document.form.username.value==""){
alert("请输入用户名");
return false;
}else if(document.form.username.value.length<6||document.form.username.value.length>12){
alert("请输入用户名:6-12位字符");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
<input type="submit" name="register" value="注册">
</form>
</body>
</html>
针对上面的表单验证是通过弹出窗口提示,用户体验不是很好,如何优化呢?看下面的表单验证的改进版.
<html>
<head>
<title>FormTest2</title>
<script language="javascript">
function validateData(){
if(document.form.username.value==""){
document.getElementById("usernameerror").innerHTML="请输入用户名";
return false;
}else if(document.form.username.value.length<6||document.form.username.value.length>12){
document.getElementById("usernameerror").innerHTML="请输入用户名:6-12位字符";
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
<span id="usernameerror"></span>
<input type="submit" name="register" value="注册">
</form>
</body>
</html>
注意针对上面的<span id="usernameerror"></span>,我们也可以换成<div id="usernameerror"></div>,他们的区别是
div会另起一行显示,而span因为是行内快所以会和文本框在同一行显示.