用正则表达式实现表单验证提交
发表时间：2020-10-17
发布人：葵宇科技
浏览次数：42
用正则表达式实现表单验证提交
前端基础，正好做个练手，记录一下
用到了HTML5的标签和JS的基本逻辑还有正则表达式
这么屑的代码还有人看？（滑稽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload=function(){
//用户名验证模块
document.getElementById("username").onblur=function(){//用户名表单验证，失焦时触发
//用户名不能为空
var username=document.getElementById("username")//拿到用户名文档对象
var usernameError=document.getElementById("usernameError")//拿到文档报错对象
if(username.value==""){
usernameError.innerHTML="<font color='red' size='2'>注册名不能为空!</font>"
}
//用户名必须在6-14位之间
//用户登录正则表达格式
var regExpUesrname=/^[a-zA-Z]\w{5,13}$/
//regExpOK正则true/false接收用
var regExpOK=regExpUesrname.test(username.value)
if(!regExpOK){
if(username.value.length<6){
usernameError.innerHTML="<font color='red' size='2'>注册名不能小于6位!</font>"
}
if(username.value.length>14){
usernameError.innerHTML="<font color='red' size='2'>注册名不能大于14位!</font>"
}
document.getElementById("username").onfocus=function(){
username.value=""
//清空报错span标签
usernameError.innerText=""
}
}
}
//邮箱验证模块
//邮箱失焦事件
document.getElementById("email").onblur=function(){
//拿到邮箱对象
var email=document.getElementById("email")
//拿到邮箱报错对象
var emailError=document.getElementById("emailError")
//拿到邮箱正则表达对象
var emailregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
//拿到正则判断对象
var emailregExpOK=emailregExp.test(email.value)
//邮箱格式判断
if (!emailregExpOK){
//邮箱格式报错
emailError.innerHTML="<font color='red' size='2'>邮箱格式错误！</font>"
//聚焦清空模块
document.getElementById("email").onfocus=function(){
email.value=""
//清空报错span标签
emailError.innerText=""
}
}
}
//重复密码验证单元
//重复密码失焦事件
document.getElementById("passwordAgain").onblur=function(){
//拿到密码对象和密码重复对象
var password=document.getElementById("password")
var passwordagain=document.getElementById("passwordAgain")
//重复密码密码报错对象
var passwordgaginError=document.getElementById("passwordAgainError")
//密码不重复事件
if (password.value!=passwordagain.value){
//密码报错
passwordgaginError.innerHTML="<font color='red' size='2'>确认密码与重复密码不一致！</font>"
//聚焦清空模块
document.getElementById("passwordAgain").onfocus=function(){
passwordagain.value=""
//清空报错span标签
passwordgaginError.innerText=""
}
}
}
}
</script>
<!--表单提交，form和action-->
<form action="http://localhost:8080/user" method="post">
<table>
<tr>
<th>用户名:</th>
<th><input type="text" id="username" name="username"/></th>
<th><span id="usernameError"></span></th>
</tr>
<tr>
<th>邮 箱：</th>
<th><input type="text" id="email" name="email"/></th>
<th><span id="emailError"></span></th>
</tr>
<tr>
<th>密 码:</th>
<th><input type="text" id="password" /></th>
<th><span id="passwordError"></span></th>
</tr>
<tr>
<th>确认密码:</th>
<th> <input type="text" id="passwordAgain" name="passwordAgain"/></th>
<th> <span id="passwordAgainError"></span></th>
</tr>
<tr>
<th></th>
<th><input action="http://www.localhost:8086.com" type="submit" id="btn" value="提 交" method="post"/></th>
<th></th>
</tr>
</table>
</form>
</body>
</html>
