js封装公用from表单验证工具验证长度邮件电话身份证非空

谁借莪１个温暖的怀抱￠ 2024-03-17 15:39 44阅读 0赞

效果

![6fe101464799aa3d3509353f68558df9.png][]

function validateRequiredFields(formId) {
      var form = document.getElementById(formId);
      var elements = form.elements;
      var valid = true;
      
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.hasAttribute("req")) {
          var value = element.value.trim();
          if (value === "") {
            valid = false;
            showError(element, "必填项不能为空");
          } else {
            hideError(element, "必填项不能为空");
          }
          
          if (element.hasAttribute("min")) {
            var minLength = parseInt(element.getAttribute("min"));
            if (value.length < minLength) {
              valid = false;
              showError(element, "必须至少输入" + minLength + "个字符");
            } else {
              hideError(element, "必须至少输入" + minLength + "个字符");
            }
          }
          
          if (element.hasAttribute("max")) {
            var maxLength = parseInt(element.getAttribute("max"));
            if (value.length > maxLength) {
    			 valid = false;
    		    showError(element, "最多只能输入" + maxLength + "个字符");
    			element.value = value.substr(0, maxLength);
            } else {
              hideError(element, "最多只能输入" + maxLength + "个字符");
            }
          }
          
          if (element.hasAttribute("type")) {
            var type = element.getAttribute("type");
            switch (type) {
              case "idcard":
                if (!validateIdCard(value)) {
                  valid = false;
                  showError(element, "身份证号码格式不正确");
                } else {
                  hideError(element, "身份证号码格式不正确");
                }
                break;
              case "phone":
                if (!validatePhone(value)) {
                  valid = false;
                  showError(element, "手机号码格式不正确");
                } else {
                  hideError(element, "手机号码格式不正确");
                }
                break;
              case "email":
                if (!validateEmail(value)) {
                  valid = false;
                  showError(element, "邮箱格式不正确");
                } else {
                  hideError(element, "邮箱格式不正确");
                }
                break;
              case "number":
                if (!validateNumber(value)) {
                  valid = false;
                  showError(element, "必须输入数字");
                } else {
                  hideError(element, "必须输入数字");
                }
                break;
            }
          }
          
          element.addEventListener("change", function() {
            validateRequiredFields(formId);
          });
        }
      }
      
      return valid;
    }
    
    function showError(element, message) {
      element.style.border = "1px solid red";
      element.style.backgroundColor = "#FEE";
      var errorSpan = element.nextSibling;
      if (!errorSpan || errorSpan.className !== "error") {
        errorSpan = document.createElement("span");
        errorSpan.className = "error";
        errorSpan.style.color = "red";
        errorSpan.style.fontSize = "12px";
        element.parentNode.insertBefore(errorSpan, element.nextSibling);
      }
      errorSpan.innerHTML = message;
    }
    
    function hideError(element, message) {
      element.style.border = "";
      element.style.backgroundColor = "";
      var errorSpan = element.nextSibling;
      if (errorSpan && errorSpan.className === "error" && errorSpan.innerHTML === message) {
        errorSpan.parentNode.removeChild(errorSpan);
      }
    }
    
    function validateIdCard(idCard) {
      var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      return pattern.test(idCard);
    }
    
    function validatePhone(phone) {
      var pattern = /^1[3456789]\d{9}$/;
      return pattern.test(phone);
    }
    
    function validateEmail(email) {
      var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      return pattern.test(email);
    }
    
    function validateNumber(number) {
      var pattern = /^\d+$/;
      return pattern.test(number);
    }

[6fe101464799aa3d3509353f68558df9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/40d96ef5a3c74f039f09f9ee630f3177.png

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关表单验证（JS）

一、JS表单基本介绍 1、概述作用目的：减轻服务器压力；用来传数据给服务器的时候进行验证吗，减轻负担。 2、分析需求： 1. 不能为空 2. 字

Love The Way You Lie/ 2024年03月25日 10:48/ 0 赞/ 111 阅读

相关 js封装公用from表单验证工具验证长度邮件电话身份证非空

效果 ![6fe101464799aa3d3509353f68558df9.png][] function validateRequiredFields(formI

谁借莪１个温暖的怀抱￠/ 2024年03月17日 15:39/ 0 赞/ 45 阅读

相关 JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）

1.英文字母》》jsp,html语句 <input type="text" οnblur="checkChart(this.value)" placeholder=

我会带着你远行/ 2023年10月04日 17:32/ 0 赞/ 76 阅读

相关 antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

\\ antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) \\\\\ antd 的表单校验方法包括 validateFields 和

谁借莪１个温暖的怀抱￠/ 2022年10月24日 05:53/ 0 赞/ 220 阅读

相关 js验证表单

|-- form表单 <form action="<%=path%>/search" method="post" οnsubmit="return checkAll()">

末蓝、/ 2022年09月24日 15:29/ 0 赞/ 297 阅读

相关 Js 验证表单

预加载 $(document).ready(function(){ $("conid").focus(); });

桃扇骨/ 2022年04月17日 04:18/ 0 赞/ 326 阅读

相关 js表单验证(空格验证)

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2022年04月05日 18:48/ 0 赞/ 344 阅读

相关 js表单验证

<script type="text/javascript"> function check(){ var name = document.

末蓝、/ 2022年02月17日 07:53/ 0 赞/ 295 阅读

相关 js表单验证

<div class="addDIV"> <div class="panel panel-success"> <

迷南。/ 2021年12月21日 20:15/ 0 赞/ 343 阅读

相关 js表单验证

<html> <head> <meta charset="UTF-8"> <title>js表单验证</title> </head> <body> <form name

阳光穿透心脏的1/2处/ 2021年09月16日 14:26/ 0 赞/ 491 阅读