有点点JS基础的人都可以看得明白,那么就不多说,直接上代码
JS代码如下
function chargeid() {
var x, text;
x=document.login.name.value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10
if (x.length<4||x.length>9) {
text = "用户名长度应该为5-9之间"
document.getElementById("charge1").innerHTML = text;
return false;//阻止表单提交
} else {
text = "输入正确";
document.getElementById("charge1").innerHTML = text;
return true;
}
}
HTML代码(自动忽略属性)
<div class="logo"></div>
<form name = "login" method="post" onSubmit= "return chargeid();">
<div class="form-item">
<input id="username" type="text" autocomplete="off" placeholder="用户名" name = "name" required="required">
<p class="tip" id="charge1"></p>
</div>
<div class="form-item">
<input id="password" type="password" autocomplete="off" placeholder="登录密码" name = "password" required="required">
<p class="tip">密码不正确</p>
</div>
<div class="form-item">
<button type="submit" class="button1">登 录</button>
</div>
</form>