<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的原生表单校验</title>
<!--
用户名:8-16位的数字或者字母
密码:6-16位的数字字母组成
确认密码和密码一致
邮箱符合邮箱格式:
数字或字母@数字字母.(com/.com.cn/)
-->
<style>
#formDiv{
border: 1px solid #000;
width: 420px;
height: 240px;
margin: 150px 0 0 400px;
background-color: #33FFCC;
border-radius: 0.75rem;
}
#userDiv{
margin: 30px 0 0 60px;
}
#pwdDiv{
margin: 10px 0 0 60px;
}
#repwdDiv{
margin: 10px 0 0 60px;
}
#emailDiv{
margin: 10px 0 0 60px;
}
#btnDiv{
margin: 10px 0 0 80px;
}
</style>
</head>
<body bgcolor="#333333">
<div id="formDiv">
<!--
表单是否能够提交取决于当前onsbumit事件(绑定一个函数:将所有的表单项都必须校验)的返回值如果true,表示能够提交
否则false,不能提交
-->
<form action="浮动.html" method="get" onsubmit="return checkAll()">
<div id="userDiv">
用户名:<input type="text" name="username" id="username" onblur="checkUserName()" placeholder="请输入用户名"><span id="userTip"></span>
</div>
<div id="pwdDiv">
密  码:<input type="password" name="password" onblur="checkPassword()" id="password" placeholder="请输入密码"><span id="pwdTip"></span>
</div>
<div id="repwdDiv">
确认密码:<input type="password" name="repwd" id="repwd" onblur="checkRePassword()" placeholder="请输入密码"><span id="repwdTip"></span>
</div>
<div id="emailDiv">
邮箱:<input type="text" name="email" id="email" onblur="checkEmail()" placeholder="请输入邮箱"><span id="emailTip"></span>
</div>
<div id="btnDiv">
<input type="submit" value="注册"><input type="button" style="margin-left: 30px" value="登录">
</div>
</form>
</div>
<script>
//校验用户名:
function checkUserName(){
//通过 id="username"获取当前用户名所在的文本框的标签对象并获取它的内容
var username = document.getElementById("username").value ;
//密码:6-16位的数字字母组成
//定义正则表达式
var reg = /^[A-Za-z0-9_]{6,16}$/ ;
//获取id="userTip"的span标签对象
var spanTip = document.getElementById("userTip") ;
//校验用户名
if(reg.test(username)){
//成立
spanTip.innerHTML = "恭喜您,可用".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验用户名:
function checkPassword(){
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//用户名:8-16位的数字或者字母
//定义正则表达式
var reg = /^[A-Za-z0-9_]{8,16}$/ ;
//获取id="pwdTip"的span标签对象
var spanTip = document.getElementById("pwdTip") ;
//校验用户名
if(reg.test(password)){
//成立
spanTip.innerHTML = "√".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//确认密码和密码一致
function checkRePassword() {
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//获取当前确认密码框的内容id="repwd"
var repassword = document.getElementById("repwd").value;
//获取span标签对象
// id="repwdTip"
var spanTip = document.getElementById("repwdTip");
if(repassword==password){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验邮箱
function checkEmail() {
// id="email"的输入的内容
var email = document.getElementById("email").value ;
// 邮箱符合邮箱格式:
//数字或字母@数字字母.(com/.com.cn/.ISTone/)
//纯QQ邮箱 数字@qq.com
//本身字符:就是.----转义 \.
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/ ;
//获取id="emailTip"的span标签对象
var spanTip = document.getElementById("emailTip");
//校验
if(reg.test(email)){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML="×".fontcolor("red") ;
return false ;
}
}
//表单能否提交
function checkAll() {
//将所有的表单项都必须满足规则
if(checkUserName() && checkPassword() && checkRePassword() && checkEmail()){
return true ;
}else{
return false ;
}
}
</script>
</body>
</html>
版权声明：本文为Liang_it_yuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。