js表单验证与提交

PROMULGATOR

爱吃鱼的小虾米??

浙江省金华市电子政府网络

← canvas边框动画效果（原创）

→ 基于jquery的横向轮播图

相关代码

js表单验证与提交

原生js表单验证代码

简单的用户验证

原生js滑块验证

前端表单验证

js图形验证码（原创）

jQuery表单验证注册

Html

Css

Js


    用户名：*
    密码：
        *
        确认密码：*
        手机号：*
        邮箱：*

function stopsubmit(that) {
      that.preventDefault();
  }
  document.getElementById("myform").onsubmit = function(e) {
      var username = document.getElementById("username");
      var psd = document.getElementById("psd");
      var repsd = document.getElementById("repsd");
      var tel = document.getElementById("tel");
      var email = document.getElementById("email");

var usp = username.nextSibling.innerHTML;
      var psp = psd.nextSibling.innerHTML;
      var repsp = repsd.nextSibling.innerHTML;
      var tep = tel.nextSibling.innerHTML;
      var ema = email.nextSibling.innerHTML;
      if (username.value == "") {
          username.nextSibling.innerHTML = "*请输入用户名"
          username.nextSibling.style.color = "#f00";
          stopsubmit(e)
      }
      if (psd.value == "") {
          psd.nextSibling.innerHTML = "*请输入密码"
          psd.nextSibling.style.color = "#f00";
          stopsubmit(e)
      }
      if (repsd.value == "") {
          repsd.nextSibling.innerHTML = "*请确认密码"
          repsd.nextSibling.style.color = "#f00";
          stopsubmit(e)
      }
      if (tel.value == "") {
          tel.nextSibling.innerHTML = "*请输入手机号码"
          tel.nextSibling.style.color = "#f00";
          stopsubmit(e)
      }
      if (email.value == "") {
          email.nextSibling.innerHTML = "*请输邮箱"
          email.nextSibling.style.color = "#f00";
          stopsubmit(e)
      }
      if (usp != "用户名可用" || psp != "密码可用" || repsp != "密码一致" || tep != "手机号可用" || ema != "邮箱可用") {
          stopsubmit(e)
      }
  }
  document.getElementById("username").onchange = function() {
      if (this.value == "root") {
          this.nextSibling.innerHTML = "用户名已被占用"
          this.nextSibling.style.color = "#f00"
      } else {
          this.nextSibling.innerHTML = "用户名可用"
          this.nextSibling.style.color = "#0f0"
      }
  }
  document.getElementById("psd").onchange = function() {
      if (this.value.length >= 6) {
          this.nextSibling.innerHTML = "密码可用"
          this.nextSibling.style.color = "#0f0"
      } else {
          this.nextSibling.innerHTML = "密码不可用"
          this.nextSibling.style.color = "#f00"
      }
  }
  document.getElementById("repsd").onchange = function() {
      if (this.value == document.getElementById("psd").value) {
          this.nextSibling.innerHTML = "密码一致"
          this.nextSibling.style.color = "#0f0"
      } else {
          this.nextSibling.innerHTML = "密码不一致，请重新输入"
          this.nextSibling.style.color = "#f00"
      }
  }
  document.getElementById("tel").onchange = function() {
      var phone = /^(13|15|16|17|18)[0-9]{9}$/;
      if (phone.test(this.value)) {
          this.nextSibling.innerHTML = "手机号可用"
          this.nextSibling.style.color = "#0f0"
      } else {
          this.nextSibling.innerHTML = "请输入正确的手机号"
          this.nextSibling.style.color = "#f00"
      }
  }
  document.getElementById("email").onchange = function() {
      var em = /^\w+@\w+\.\w{2,3}$/;
      if (em.test(this.value)) {
          this.nextSibling.innerHTML = "邮箱可用"
          this.nextSibling.style.color = "#0f0"
      } else {
          this.nextSibling.innerHTML = "请输入正确的邮箱"
          this.nextSibling.style.color = "#f00"
      }
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js表单验证与提交



代码描述：原生js写的表单验证，思路清晰便于修改。

更新时间：2019-10-13 23:15:33
简洁样式表单验证，样式根据自己需求直接添加，无需删改任何样式。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js表单验证与提交-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号