Code666 (代码贴、代码片段)

[JavaScript] 原生js代码表单验证插件 提供常用的10种表单验证方式 →→→→→进入此内容的聊天室

来自 , 2019-05-02, 写在 JavaScript, 查看 117 次.
URL http://www.code666.cn/view/86098ef8
  1. verjs是一款原生js代码编写的表单验证插件，提供了常用的10种表单验证方式，包括身份证号码验证、手机电话号码、电子邮箱验证、必填字段验证、正则自定义验证、多次对比验证、最大值/最小值验证……
  2.  
  3. html代码：
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  9.     <meta content="yes" name="apple-mobile-web-app-capable"/>
  10.     <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  11.     <meta content="telephone=no" name="format-detection"/>
  12.     <meta content="email=no" name="format-detection"/>
  13.     <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>
  14.     <title>verJs</title>
  15.     <style>
  16.         dl dt,dl dd{
  17.             display: inline-block;
  18.         }
  19.  
  20.         input{
  21.             height: 30px;
  22.             line-height: 30px;
  23.             padding: 0 10px;
  24.         }
  25.  
  26.         textarea{
  27.             resize: none;
  28.             width: 120px;
  29.             line-height: 30px;
  30.             padding: 0 10px;
  31.             height: 120px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <form action="http://www.yuncode.net/js/3969.html" method="post" autocomplete="off" data-form="ajax">
  37.     <dl>
  38.         <dt>必填验证</dt>
  39.         <dd>
  40.             <input type="text" name="req">
  41.         </dd>
  42.     </dl>
  43.     <dl>
  44.         <dt>最小数字</dt>
  45.         <dd>
  46.             <input type="text" name="min_number">
  47.         </dd>
  48.     </dl>
  49.     <dl>
  50.         <dt>最大数字</dt>
  51.         <dd>
  52.             <input type="text" name="max_number" id="eq">
  53.         </dd>
  54.     </dl>
  55.     <dl>
  56.         <dt>相等比较</dt>
  57.         <dd>
  58.             <input type="text" name="eq">
  59.         </dd>
  60.     </dl>
  61.     <dl>
  62.         <dt>最小长度</dt>
  63.         <dd>
  64.             <input type="text" name="min_length">
  65.         </dd>
  66.     </dl>
  67.     <dl>
  68.         <dt>最大长度</dt>
  69.         <dd>
  70.             <input type="text" name="max_length">
  71.         </dd>
  72.     </dl>
  73.     <dl>
  74.         <dt>正则验证</dt>
  75.         <dd>
  76.             <input type="password" name="rule">
  77.         </dd>
  78.     </dl>
  79.     <dl>
  80.         <dt>手机/电话验证</dt>
  81.         <dd>
  82.             <input type="text" name="mobile">
  83.         </dd>
  84.     </dl>
  85.     <dl>
  86.         <dt>邮箱验证</dt>
  87.         <dd>
  88.             <input type="text" name="email" data-email="true">
  89.         </dd>
  90.     </dl>
  91.     <dl>
  92.         <dt>身份证验证</dt>
  93.         <dd>
  94.             <input type="text" name="email" data-idcard="true">
  95.         </dd>
  96.     </dl>
  97.     <button>提交代码</button>
  98. </form>
  99. </body>
  100. <script src="asset/verJs.js"></script>
  101. <script>
  102.     var form = new VerJs();
  103.     form.init({
  104.         form:"form",//验证的表单
  105.         //验证数据集，也可以在标记中以data-XXX的形式加入验证
  106.         data:{
  107.             req:{
  108.                 required:true
  109.             },
  110.             min_number:{
  111.                 min:2
  112.             },
  113.             max_number:{
  114.                 max:12
  115.             },
  116.             eq:{
  117.                 equal:"#eq"
  118.             },
  119.             min_length:{
  120.                 minlength:6
  121.             },
  122.             max_length:{
  123.                 maxlength:6
  124.             },
  125.             rule:{
  126.                 rule:"^\\d{6}$",
  127.                 required:true
  128.             },
  129.             mobile:{
  130.                 mobile:true
  131.             }
  132.         },
  133.         //验证提示消息
  134.         message:{
  135.             req:{
  136.                 required:"这是一条必填数据"
  137.             },
  138.             rule:{
  139.                 rule:"请输入六位数字"
  140.             }
  141.         },
  142.         success:function (data) {
  143.             //ajax提交成功后的回调函数
  144.             alert("hahahha");
  145.         },
  146.         fail:function (data) {
  147.             //ajax提交失败后的回调函数
  148.             alert("ieieiiruwei");
  149.         }
  150.     });
  151. </script>
  152. </html>
  153.  
  154. VerJs.js里面的代码：
  155. window.VerJs = (function () {
  156.     var ver = function () {
  157.         this.form;
  158.         this.messages = {
  159.             required: "当前选项不能为空！",
  160.             min: 0,
  161.             max: 0,
  162.             minlength: 0,
  163.             maxlength: 0,
  164.             rule: "",
  165.             equal: "",
  166.             mobile: "请输入有效的手机号码",
  167.             email: "请输入规则的电子邮箱",
  168.             idcard: "请输入有效的身份证号码"
  169.         };
  170.         this.func = {
  171.             required: this.data_required,
  172.             min: this.data_min_value,
  173.             max: this.data_max_value,
  174.             minlength: this.data_min_length,
  175.             maxlength: this.data_max_length,
  176.             rule: this.data_rule,
  177.             equal: this.data_equal,
  178.             mobile: this.data_mobile,
  179.             email: this.data_email,
  180.             idcard: this.data_id_card
  181.         };
  182.         this.change;
  183.         this.error = function (errorMessage, target) {
  184.             this.clear_error(target);
  185.             target.classList.add("ver-error-input");
  186.             var errorTag = document.createElement("span");
  187.             errorTag.className = "ver-errors";
  188.             var iconCarets = document.createElement("i");
  189.             iconCarets.className = "verJsFont ver-icon-carets ver-error-caret";
  190.             errorTag.appendChild(iconCarets);
  191.             var iconInfo = document.createElement("i");
  192.             iconInfo.className = "verJsFont icon-info-o";
  193.             errorTag.appendChild(iconInfo);
  194.             var span = document.createElement("span");
  195.             span.innerText = errorMessage;
  196.             errorTag.appendChild(span);
  197.             this.insertAfter(errorTag, target);
  198.         };
  199.         this.insertAfter = function (newElement, targentElement) {
  200.             var parent = targentElement.parentNode;
  201.             if (parent.lastChild == targentElement) {
  202.                 parent.appendChild(newElement);
  203.             } else {
  204.                 parent.insertBefore(newElement, targentElement.nextSibling);
  205.             }
  206.         };
  207.         this.styles = function () {
  208.             var css = document.createElement("link"),
  209.                 icon = document.createElement("link");
  210.             css.href = "asset/need/common.css?v=1.0.2&$_=" + Math.random();
  211.             icon.href = "asset/need/vericon.css?v=1.0.2&$_=" + Math.random();
  212.             css.rel = icon.rel = "stylesheet";
  213.             css.type = icon.type = "text/css";
  214.             var link = document.getElementsByTagName("head")[0];
  215.             link.appendChild(css);
  216.             link.appendChild(icon);
  217.         };
  218.         this.success = function (data) {
  219.             alert("提交成功！")
  220.         }
  221.         this.fail = function (data) {
  222.             alert("提交失败！");
  223.         }
  224.     };
  225.     ver.prototype = {
  226.         init: function (params) {
  227.             var _self = this;
  228.             this.styles();
  229.             this.form = document.querySelector(params.form);
  230.             if (!this.form) this.form = document.querySelector("form");
  231.             this.change = params.change ? params.change : "default";
  232.             this._sef_data(params.data, params.message);
  233.             this.form.onsubmit = function () {
  234.                 return _self.submit();
  235.             };
  236.             if (params.success) {
  237.                 this.success = params.success;
  238.             }
  239.             if (params.fail) {
  240.                 this.fail = params.fail;
  241.             }
  242.         },
  243.         submit: function () {
  244.             this.verification();
  245.             var error = this.form.querySelectorAll(".ver-error-input").length;
  246.             if (error > 0) {
  247.                 this.form.querySelector(".ver-error-input").focus();
  248.                 return false;
  249.             }
  250.             var form = this.form.getAttribute("data-form");
  251.             if (form == "ajax") {
  252.                 this.ajax();
  253.                 return false;
  254.             }
  255.             return true;
  256.         },
  257.         _sef_data: function (data, message) {
  258.             var _self = this;
  259.             if (data) {
  260.                 for (var i in data) {
  261.                     var names = document.getElementsByName(i);
  262.                     names.forEach(function (item) {
  263.                         for (var j in data[i]) {
  264.                             var messages = message && message[i] && message[i][j] ? message[i][j] : _self.messages[j];
  265.                             if (j != "min" && j != "max" && j != "minlength" && j != "maxlength" && j != "rule" && j != "equal") {
  266.                                 item.setAttribute("data-" + j, messages);
  267.                             } else if (j == "rule") {
  268.                                 item.setAttribute("data-rule", data[i][j]);
  269.                                 item.setAttribute("data-rule-message", messages);
  270.                             } else {
  271.                                 item.setAttribute("data-" + j, data[i][j]);
  272.                             }
  273.  
  274.                         }
  275.                     })
  276.                 }
  277.             }
  278.  
  279.             //判断标记中是否有data验证的数据标记
  280.             for (var i in this.messages) {
  281.                 var names = this.form.querySelectorAll("[data-" + i + "]");
  282.                 names.forEach(function (items) {
  283.                     var val = items.getAttribute("data-" + i);
  284.                     if (val == "true" || val == "false") {
  285.                         items.setAttribute("data-" + i, _self.messages[i]);
  286.                     }
  287.                     items.onblur = function () {
  288.                         _self.query(this);
  289.                     };
  290.                     items.change = function () {
  291.                         _self.query(this);
  292.                     };
  293.                     items.onfocus = function () {
  294.                         _self.clear_error(this);
  295.                     };
  296.                     if (_self.change == "keyup") {
  297.                         items.onkeyup = function () {
  298.                             _self.query(this);
  299.                         }
  300.                     }
  301.                 })
  302.             }
  303.         },
  304.         verification: function () {
  305.             var _self = this;
  306.             for (var i in this.func) {
  307.                 var names = this.form.querySelectorAll("[data-" + i + "]");
  308.                 if (names.length > 0) {
  309.                     names.forEach(function (items) {
  310.                         _self.func[i](items, _self);
  311.                     })
  312.                 }
  313.             }
  314.         },
  315.         query: function (objects) {
  316.             for (var i in this.func) {
  317.                 if (objects.getAttribute("data-" + i)) {
  318.                     this.func[i](objects, this);
  319.                 }
  320.             }
  321.         },
  322.         clear_error: function (objects) {
  323.             var parent = objects.parentNode,
  324.                 errorTag = parent.querySelector(".ver-errors");
  325.             if (errorTag) {
  326.                 parent.removeChild(errorTag);
  327.             }
  328.             objects.classList.remove("ver-error-input");
  329.         },
  330.         data_required: function (objects, _self) {
  331.             var value = objects.value,
  332.                 errorMessage = objects.getAttribute("data-required");
  333.             if (value == '' || value == null) {
  334.                 _self.error(errorMessage, objects);
  335.                 return false;
  336.             }
  337.             return true;
  338.         },
  339.         data_min_value: function (objects, _self) {
  340.             var value = (objects.value),
  341.                 min = parseInt(objects.getAttribute("data-min"));
  342.             if (value) {
  343.                 value == parseInt(value);
  344.                 if (isNaN(value) || min > value) {
  345.                     _self.error("最小值为：" + min, objects);
  346.                     return false;
  347.                 }
  348.             }
  349.             return true;
  350.         },
  351.         data_max_value: function (objects, _self) {
  352.             var value = (objects.value),
  353.                 min = parseInt(objects.getAttribute("data-max"));
  354.             if (value) {
  355.                 value = parseInt(value);
  356.                 if (isNaN(value) || min < value) {
  357.                     _self.error("最大值为：" + min, objects);
  358.                     return false;
  359.                 }
  360.             }
  361.             return true;
  362.         },
  363.         data_min_length: function (objects, _self) {
  364.             var value = objects.value.length,
  365.                 min = parseInt(objects.getAttribute("data-minlength"));
  366.             if (value < min) {
  367.                 _self.error("最少输入" + min + "个字符", objects);
  368.                 return false;
  369.             }
  370.             return true;
  371.         },
  372.         data_max_length: function (objects, _self) {
  373.             var value = objects.value.length,
  374.                 min = parseInt(objects.getAttribute("data-maxlength"));
  375.             if (value > min) {
  376.                 _self.error("最多输入" + min + "个字符", objects);
  377.                 return false;
  378.             }
  379.             return true;
  380.         },
  381.         data_rule: function (objects, _self) {
  382.             var value = objects.value,
  383.                 rule = objects.getAttribute("data-rule"),
  384.                 errorMessage = objects.getAttribute("data-rule-message");
  385.             if (!errorMessage) errorMessage = "格式错误!";
  386.             rule = new RegExp(rule);
  387.             if (value) {
  388.                 if (!rule.test(value)) {
  389.                     _self.error(errorMessage, objects);
  390.                     return false;
  391.                 }
  392.             }
  393.             return true;
  394.         },
  395.         data_equal: function (objects, _self) {
  396.             var value = objects.value,
  397.                 equal = document.querySelector(objects.getAttribute("data-equal")).value,
  398.                 errorMessage = "两次输入内容不一致";
  399.             if (value != equal) {
  400.                 _self.error(errorMessage, objects);
  401.                 return false;
  402.             }
  403.             return true;
  404.         },
  405.         data_mobile: function (object, _self) {
  406.             var value = object.value,
  407.                 rule_tel = /^(0\d{2,3}\d{7,8}|0\d{2,3}-)\d{7,8}$/,
  408.                 rule_phone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
  409.                 errorMessage = object.getAttribute("data-mobile");
  410.             if (value && !rule_phone.test(value) && !rule_tel.test(value)) {
  411.                 _self.error(errorMessage, object);
  412.                 return false;
  413.             }
  414.             return true;
  415.         },
  416.         data_email: function (object, _self) {
  417.             var value = object.value,
  418.                 rule_email = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
  419.                 errorMessage = object.getAttribute("data-email");
  420.             if (value && !rule_email.test(value)) {
  421.                 _self.error(errorMessage, object);
  422.                 return false;
  423.             }
  424.             return true;
  425.         },
  426.         data_id_card: function (object, _self) {
  427.             var value = object.value,
  428.                 rule_email = /^([1-9]\d{5}[1]\d{3}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[0-9xX]|[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3})$/,
  429.                 errorMessage = object.getAttribute("data-idcard");
  430.             if (value && !rule_email.test(value)) {
  431.                 _self.error(errorMessage, object);
  432.                 return false;
  433.             }
  434.             return true;
  435.         },
  436.         ajax: function () {
  437.             var _self = this;
  438.             var data = this.formData();
  439.             var xhr = new XMLHttpRequest();
  440.             xhr.open(this.form.method, this.form.action, true);
  441.             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  442.             xhr.onreadystatechange = function () {
  443.                 if (xhr.readyState == 4) {
  444.                     if (xhr.status == 200 || xhr.status == 304) {
  445.                         _self.success(xhr.responseText);
  446.                     } else {
  447.                         _self.fail(xhr.responseText);
  448.                     }
  449.                 }
  450.             };
  451.             xhr.send(data);
  452.         },
  453.         formData: function () {
  454.             var ele = [],
  455.                 inputs = this.form.querySelectorAll("input"),
  456.                 select = this.form.querySelectorAll("select"),
  457.                 text = this.form.querySelectorAll("textarea");
  458.             if (inputs.length > 0) {
  459.                 inputs.forEach(function (items) {
  460.                     // ele.push(items);
  461.                     var type = items.type.toLowerCase(),
  462.                         value = "";
  463.                     if (type !== 'checkbox' && type != "radio") {
  464.                         value = items.name + "=" + items.value;
  465.                     } else {
  466.                         if (items.checked) {
  467.                             value = items.name + "=" + items.value;
  468.                         }
  469.                     }
  470.                     if (value) {
  471.                         ele.push(value);
  472.                     }
  473.                 });
  474.             }
  475.  
  476.             if (select.length > 0) {
  477.                 select.forEach(function (items) {
  478.                     ele.push(items.name + "=" + items.value);
  479.                 })
  480.             }
  481.  
  482.             if (text.length > 0) {
  483.                 text.forEach(function (items) {
  484.                     ele.push(items.name + "=" + items.value);
  485.                 })
  486.             }
  487.             return encodeURI(ele.join("&"));
  488.         }
  489.     };
  490.     return ver;
  491. })();

回复 "原生js代码表单验证插件 提供常用的10种表单验证方式"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666