表单验证

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>表单验证</title>
 <style>
 .item{
 margin-top: 15px;
 }
 .letterSpace{
 letter-spacing: 2em;
 }
 input{
 width: 200px;
 height: 26px;
 transition: .5s
 }
 .err{
 font-size: 12px;
 color: red;
 }
 .register{
 border-radius: 10px;
 cursor: pointer;
 }
 </style>
 </head>
 <body>
 <h3>表单提交验证</h3>
 <form action="#" method="post">
 <div class="item">
 <span class="letterSpace">姓</span>名:
 <input type="text" name="userName" id="userName">
 <span class="err"></span>
 </div>
 <div class="item">
 <span class="letterSpace">密</span>码:
 <input type="password" name="password" id="password">
 <span class="err"></span>
 </div>
 <div class="item">
 确认密码:
 <input type="password" name="confrimPWD" id="confrimPWD">
 <span class="err"></span>
 </div>
 <div class="item">
 <span class="letterSpace">生</span>日:
 <input type="date" name="birthday" id="birthday">
 <span class="err"></span>
 </div>
 <div class="item">
 电话号码:
 <input type="tel" name="tel" id="tel">
 <span class="err"></span>
 </div>
 <div class="item">
 家庭住址:
 <input type="text" name="address" id="address">
 <span class="err"></span>
 </div>
 <div class="item">
 <button class="register">用户注册</button>
 </div>
 </form>
 <script>
 // 获取DOM元素
 let form = document.forms[0];
 let err = document.getElementsByClassName("err");
 let input = document.getElementsByTagName("input");
 /* ------------------------------------------------------------------*/
 // 用户名焦点事件
 let userNameholder = function(){
 this.setAttribute("placeholder","以字母开头,长度为4-11位");
 this.style.width = 250 + "px";
 }
 // 用户名验证
 let userNameCheck = function(){
 this.setAttribute("placeholder","");
 let reg = /^[A-Za-z]\w{3,10}$/;
 if(reg.test(userName.value) || userName.value === "")
 {
 err[0].innerHTML = "";
 }
 else{
 err[0].innerHTML = "用户名必须由字母开头,长度为4-11位";
 }
 // 如果输入框里面没有内容,要将长度还原
 if(userName.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 userName.addEventListener("focus",userNameholder,false);
 userName.addEventListener("blur",userNameCheck,false);
 /* ------------------------------------------------------------------*/
 // 密码焦点事件
 let passwordholder = function(){
 this.setAttribute("placeholder","密码长度为6-30位");
 this.style.width = 250 + "px";
 }
 // 验证密码事件
 let passwordCheck = function(){
 this.setAttribute("placeholder","");
 let reg = /^\w{6,30}$/;
 if(reg.test(password.value) || password.value==="")
 {
 err[1].innerHTML = "";
 }
 else{
 err[1].innerHTML = "密码长度最少6位,最多30位组成";
 }
 // 如果输入框里面没有内容,要将长度还原
 if(password.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 password.addEventListener("focus",passwordholder,false);
 password.addEventListener("blur",passwordCheck,false);
 /* ------------------------------------------------------------------*/
 // 二次密码焦点事件
 let confrimPWDholder = function(){
 this.setAttribute("placeholder","请再次输入您的密码");
 this.style.width = 250 + "px";
 }
 // 二次密码验证事件
 let confrimPWDCheck = function(){
 this.setAttribute("placeholder","");
 if(confrimPWD.value === "" || confrimPWD.value === password.value)
 {
 err[2].innerHTML = "";
 }
 else{
 err[2].innerHTML = "两次输入的密码不一致";
 }
 // 如果输入框里面没有内容,要将长度还原
 if(confrimPWD.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 confrimPWD.addEventListener("focus",confrimPWDholder,false);
 confrimPWD.addEventListener("blur",confrimPWDCheck,false);
 /* ------------------------------------------------------------------*/
 // 生日
 let birthlonger = function(){
 this.style.width = 250 + "px";
 }
 let birthshort = function(){
 if(birthday.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 birthday.addEventListener("focus",birthlonger,false);
 birthday.addEventListener("blur",birthshort,false);
 /* ------------------------------------------------------------------*/
 // 电话号码焦点事件
 let telholder = function(){
 this.setAttribute("placeholder","请填写您的手机号码");
 this.style.width = 250 + "px";
 }
 let telCheck = function(){
 let content = parseInt(tel.value);
 this.setAttribute("placeholder","");
 let reg = /^1[3578]\d{9}$/;
 if(reg.test(content) || tel.value === "")
 {
 err[4].innerHTML = "";
 }
 else{
 err[4].innerHTML = "电话号码格式不正确";
 }
 // 如果输入框里面没有内容,要将长度还原
 if(tel.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 tel.addEventListener("focus",telholder,false);
 tel.addEventListener("blur",telCheck,false);
 /* ------------------------------------------------------------------*/
 // 家庭地址焦点事件
 let addressholder = function(){
 this.setAttribute("placeholder","请填写您的家庭地址");
 this.style.width = 250 + "px";
 }
 let addressCheck = function(){
 this.setAttribute("placeholder","");
 if(address.value === "")
 {
 this.style.width = 200 + "px";
 }
 }
 address.addEventListener("focus",addressholder,false);
 address.addEventListener("blur",addressCheck,false);
 /* ------------------------------------------------------------------*/
 // 提交验证
  
 form.onsubmit = function(){
 if(password.value !== confrimPWD.value)
 {
 err[2].innerHTML = "两次输入的密码不一致";
 }
 for(let i=0;i<input.length;i++)
 {
 if(input[i].value === "")
 {
 alert("有内容还没有填写");
 return false;
 }
 }
 for(let i=0;i<err.length;i++)
 {
 if(err[i].innerHTML !== "")
 {
 alert("请正确填写内容");
 return false;
 }
 }
 alert("表单提交成功");
 return true;
 }
 </script>
 </body>
 </html>

转载于:https://www.cnblogs.com/qilin0/p/11512339.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值