常用的表单验证
练习2：
用户名不能为空，不能有数字
密码不能为空，不能少于6位，再次输入密码需要和输入密码保持一致，点击提交，校验通过则跳转成功页面，否则不给跳转并给出校验失败提示。
实现文本框提示特效
<body>
<form action="./success.html">
<p>
用户名：<input type="text">
<span id="span1"></span>
</p>
<p>
输入密码：<input type="password" id="pwd1">
<span id="span2"></span>
</p>
<p>
确认密码：<input type="password" id="pwd2">
<span id="span3"></span>
</p>
<p>
<input type="submit">
<span id="span4"></span>
</p>
</form>
<script>
document.querySelector("input[type=text]").onblur = userOnblur;
var pwd1 = document.querySelector("#pwd1");
var pwd2 = document.querySelector("#pwd2");
var form = document.querySelector("form");
var span1 = document.querySelector("#span1");
var span2 = document.querySelector("#span2");
var span3 = document.querySelector("#span3");
var span4 = document.querySelector("#span4");
function userOnblur() {
if (document.querySelector("input[type=text]").value == "") {
span1.innerHTML = "不能为空";
span1.style.color = "red";
return false;
}
for (var i = 0; i < document.querySelector("input[type=text]").value.length; i++) {
var j = document.querySelector("input[type=text]").value.substring(i, i + 1)
if (isNaN(j) == false) {
span1.innerHTML = "不能为数字";
span1.style.color = "red";
return false;
}
}
span1.innerHTML = "密码正确";
span1.style.color = "green";
return true;
}
pwd1.onblur = function () {
if (pwd1.value == "") {
span2.innerHTML = "密码不能为空";
span2.style.color = "red";
return false;
}
if (pwd1.value.length < 6) {
span2.innerHTML = "密码不能小于6位";
span2.style.color = "red";
return false;
}
else {
span2.innerHTML = "密码格式正确";
span2.style.color = "green";
return true;
}
}
pwd2.onblur = function () {
if (pwd1.value == "") {
span3.innerHTML = "密码不能为空";
span3.style.color = "red";
return false;
}
if (pwd1.value.length < 6) {
span3.innerHTML = "密码不能小于6位";
span3.style.color = "red";
return false;
}
else {
span3.innerHTML = "密码格式正确";
span3.style.color = "green";
return true;
}
}
form.onsubmit = function () {
if (pwd1.value != pwd2.value) {
span4.innerHTML = "密码验证不正确";
span4.style, color = "red";
return false;
}
else {
span4.innerHTML = "验证正确";
span4.style, color = "green";
return true;
}
}
</script>
</body>
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
