javaScript 表单验证 初学记录
<!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}/
varemail_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.最终表单中所有项目都合法方可提交-->
<!--*/--> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证2</title>
<style type="text/css">
span{
color: brown;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript" >
/*
1.用户名不能为空，由4-14位的数字和字母构成-->
2.密码和验证密码一致，邮箱地址合法-->
3. 统一失去焦点验证，错误提示在span标签中显示，字体12号，红色-->
4.获得焦点清空，错误提示信息，如果文本框中的信息不合法要求清空文本框的value-->
5.最终表单中所有项目都合法方可提交-->
*/
window.onload=function (){
// 获取usename的span标签
var usename_error_span = document.getElementById("usename_error")
//给用户名文本框绑定blur事件写代码最后写出一个功能F12调出控制台测试一个功能
var usrnameElt= document.getElementById("usename")
usrnameElt.onblur=function (){
//失去焦点的判断获取用户名用trim去除前后空白
var usename = usrnameElt.value
usename =usename.trim()
/*
//判断用户名是否为空
if(usename){
//代表usename不是空字符串
}else{
//代表usename是空字符串
}
*/
// if(usename.length==0){}else{}第二种方式判断用户名是否为空
// 第三种方式判断用户名是否为空
if(usename===""){
//代表usename不是空字符串
usename_error_span.innerHTML="用户名不能为空"
}
else{
//代表usename是空字符串||表示或
if(usename.length<6||usename.length>14){
usename_error_span.innerHTML='用户名长度必须在6到14位之间'
}else{
//用户名长度合法
//判断是否含有特殊符号正则
var regEXP = /^+$/i
if(regEXP.test(usename)){
// 用户名最终合法
}else{
//用户名含有特殊符号
usename_error_span.innerHTML='用户名只能由字母和数字组成'
}
}
}
}
//给username文本框绑定获得焦点事件
usrnameElt.onfocus=function (){
//清空非法的value
if(usename_error_span.innerHTML !==""){
usrnameElt.value = ""
}
//清空span
usename_error_span.innerHTML=""
}
//获取确认密码框对象
var userpwd2Elt=document.getElementById("userpwd2")
var userpwdElt=document.getElementById("userpwd")
var userpwd2_errorSpan = document.getElementById('userpwd2_error')
//绑定blur事件
userpwd2Elt.onblur=function (){
//获取密码和确认密码
if(userpwd2Elt.value !==userpwdElt.value){
// 密码不一致
userpwd2_errorSpan.innerHTML="密码不相同"
}else{
// 密码一致
}
}
//绑定fous事件
userpwd2Elt.onfocus=function(){
if(userpwd2_errorSpan.innerHTML!==""){
userpwd2Elt.value=""
userpwd2_errorSpan.innerHTML=""
}
}
//获取email对象
var emailElt = document.getElementById('email')
varemail_errorElt = document.getElementById('email_error')
//绑定blur事件
emailElt.onblur=function (){
// 判断邮箱格式正则表达式
var reExp2 =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
varok = reExp2.test(emailElt.value)
if(ok){
//邮箱格式正确
}else{
//邮箱格式不正确
email_errorElt.innerHTML='邮箱格式不正确 '
}
}
//绑定fous事件
emailElt.onfocus =function (){
if(email_errorElt.innerHTML!==""){
emailElt.value=""
email_errorElt.innerHTML=''
}
}
//给提交按钮绑定鼠标单击事件
var submitBtnElt=document.getElementById('submitBtn')
submitBtnElt.onclick=function (){
//触发usename的blur userpwd2的bluremail的blur
// 不需要人工操作，使用纯js代码触发事件
usrnameElt.focus()
usrnameElt.blur()
userpwd2Elt.focus()
userpwd2Elt.blur()
emailElt.focus()
emailElt.blur()
// 当所有表单项目都合法的时候提交表单
if(usename_error_span.innerHTML==="" && userpwd2_errorSpan.innerHTML==="" && email_errorElt.innerHTML===""){
//获取表单对象
var useFormElt = document.getElementById("userForm");
//可以在这里设置action也可以不在这里 标签有什么属性就可以点什么属性
useFormElt.action="http://localhost:8080/jd/save";
//提交表单
useFormElt.submit();
}}}
</script>
<!--这个表单应该使用post请求，这里为了检测用get-->
<form id="userForm" method="get">
<!--div标签节点独自占一行-->
用户名<input type="text" name="usename" id="usename"/><spanid="usename_error"></span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text"id="userpwd2"/><spanid="userpwd2_error"></span><br>
邮箱<input type="text" name="email" id="email"/><spanid="email_error"></span><br>
<input type="button" id='submitBtn' value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
页:
[1]