[Asm] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<script type="text/javascript">
window.onload=function (){
var usename =document.getElementById("usename")
var password =document.getElementById("password")
var password2 =document.getElementById("password2")
var email =document.getElementById("email")
var btm = document.getElementById("btm")
var table_re = /\w{4,14}/
var email_re =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
usename.onblur = function () {
var ok = table_re.test(usename.value)
if(!ok){
document.getElementById("sp").innerText='1.用户名不能为空，由4-14位的数字和字母构成'
usename.value=''
}
}
usename.onfocus=function(){
document.getElementById("sp").innerText=''
}
password.onblur = function () {
var ok = table_re.test(password.value)
if(!ok){
document.getElementById("sp1").innerText='1.密码不能为空，由4-14位的数字和字母构成'
password.value=''
}
}
password.onfocus=function() {
document.getElementById("sp1").innerText = ''
}
password2.onblur = function () {
var ok2 = table_re.test(password2.value)
if(ok2){
//document.getElementById("sp2").innerText='输入格式合法'
if(password2.value !== password.value){
document.getElementById("sp2").innerText='请密码和验证密码保持一致'}}
else
{
document.getElementById("sp2").innerText='格式错误由4-14位的数字和字母构成'
password2.value=''}
password2.onfocus=function() {
document.getElementById("sp2").innerText = ''
}}
email.onblur = function () {
var ok2 = email_re.test(email.value)
if(ok2){
//document.getElementById("sp3").innerText='输入格式合法'
}
else{
document.getElementById("sp3").innerText='格式错误'
email.value=''}
email.onfocus=function() {
document.getElementById("sp3").innerText = ''
}
}
btm.onclick =function () {
var sp = document.getElementById("sp").textContent
var sp1 = document.getElementById("sp2").textContent
var sp2 = document.getElementById("sp2").textContent
var sp3 = document.getElementById("sp3").textContent
var ok = sp + sp1 + sp2 + sp3
if (ok.length===0) {
document.getElementById("sp4").innerText = '注册成功'
}
else {
document.getElementById("sp4").innerText = '注册失败，请检查'
}
}
}
</script>
<input type="text" id="usename" >
<span type="text" id="sp" style="color:red" ></span>
<br>
<input type="text" id="password" >
<span type="text" id="sp1" style="color:red"></span>
<br>
<input type="text" id="password2" >
<span type="text" id="sp2" style="color:red"></span>
<br>
<input type="text" id="email" >
<span type="text" id="sp3" style="color:red"></span>
<br>
<button type="button" id="btm" >验证提交</button>
<span type="text" id="sp4" style="color:red"></span>
</body>
</html>
<!--/*-->
<!--1.用户名不能为空，由4-14位的数字和字母构成-->
<!--2.密码和验证密码一致，邮箱地址合法-->
<!--3. 统一失去焦点验证，错误提示在span标签中显示，字体12号，红色-->
<!--4.获得焦点清空，错误提示信息，如果文本框中的信息不合法要求清空文本框的value-->
<!--5.最终表单中所有项目都合法方可提交-->
<!--*/--> | 
发表于 2021-7-10 17:03
