DOM-用户名表单验证
<!--
1、用户名不能为空
2、用户名必须在6-14位之间
3、用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
4、密码和确认密码一致，邮箱地址合法
5、统一失去焦点验证
6、错误提示信息统一在span标签中提示，并且要求字符12号，红色。
7、文本框再次获得焦点之后，清空错误提示信息，如果文本框中数据 不合法要求清空文本框的value
8、最终表单中所有项均合法可提交 判断用户名是否为空 if(username===""){} if(username.length==0){} if(username){}else{} -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font: 0.75rem;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//获取usernameError的span标签
var usernameErrorSpan= document.getElementById("usernameError")
//给用户名绑定blur事件
var usernameElt = document.getElementById("username")
usernameElt.onblur=function(){
//获取用户名
var username = usernameElt.value
//去除前后空白
username=username.trim()
//判读用户名是否为空
if (username==="") {
//用户名为空true
usernameErrorSpan.innerText="用户名不能为空"
} else if(username.length<6 ||username.length>14){
//用户名长度非法
usernameErrorSpan.innerText="用户名长度在6-14之间"
}else{
//用户名长度合法
//判断是否有特殊符号
var regExp =/^[A-Za-z0-9]+$/;
var ok = regExp.test(username)
if (ok) {
//合法用户名
} else{
//用户名有特殊符号
usernameErrorSpan.innerText="用户名只能由数组字母组成"
}
}
}
//给usernameElt
usernameElt.onfocus=function(){
if(usernameErrorSpan.innerText !=""){
//清空非法value
usernameElt.value=""
}
//清空span
usernameErrorSpan.innerText=""
}
//获取密码错误的span提示标签
var pwdErrorSpan = document.getElementById("pwdError")
//获取密码框对象
var userpwd2Elt = document.getElementById("userpwd2")
//绑定blur事件
userpwd2Elt.onblur=function(){
//获取密码和确认密码
var userpwdElt = document.getElementById("userpwd")
var userpwd =userpwdElt.value
var userpwd2 = userpwd2Elt.value
if(userpwd!=userpwd2){
//密码不一致
pwdErrorSpan.innerText="密码不一致"
}else{
//密码一致
}
}
//绑定focus事件
userpwd2Elt.onfocus=function(){
if(pwdErrorSpan.innerText !=""){
userpwd2Elt.value=""
}
pwdErrorSpan.innerText=""
}
//获取email的span
var emailSpan = document.getElementById("emailError")
//给email绑定bulr事件
var emailElt = document.getElementById("email")
emailElt.onblur=function(){
//获取email
var email = emailElt.value
//编写Email正则
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w([-.]\w+)*$/
//正则的test函数
var ok = emailRegExp.test(email)
if(ok){
//合法
}else{
//不合法
emailSpan.innerText="邮箱地址不合法"
}
}
//给emailElt绑定focus
emailElt.onfocus=function(){
if(emailSpan.innerText !=""){
emailElt.value=""
}
emailSpan.innerText=""
}
//给提交按钮绑定鼠标单击事件
var submitBtnElt = document.getElementById("submitBtn")
submitBtn.onclick = function(){
//触发username 的blur事件
//不需要人工操作使用js代码触发事件
usernameElt.focus()
usernameElt.blur()
userpwd2Elt.focus()
userpwd2Elt.blur()
emailElt.focus()
emailElt.blur()
//表单所有项目都合法提交表单
if(usernameErrorSpan.innerText=="" &&pwdErrorSpan.innerText=="" &&emailSpan.innerText==""){
//提交表单
var userFormElt= document.getElementById("userForm")
userFormElt.submit()
}
}
}
</script>
<!--
1、给form添加id
-->
<form action="http://localhost:8080/jd/save" method="GET" id="userForm">
用户名<input type="text" name="username" id="username"/>
<span id="usernameError">
</span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text" name="userpwd2" id="userpwd2"/>
<span id="pwdError">
</span><br>
邮箱<input type="text" name="email" id="email"/>
<span id="emailError">
</span><br>
<!--
1、将具有提交功能的按钮submit改为button
2、给button绑定一个id=submitBtn
-->
<input type="button" value="注册" id="submitBtn"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
