常用的表单验证
练习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>
练习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>