前端系列教程之JS（常規驗證規則）
阿新 • • 發佈：2018-12-16
<!DOCTYPE HTML> <head> <title>常見的驗證規則</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h2>常見的驗證規則</h2> <p><input type="text" value='姓名驗證' data-reg='Chinese' data-smsg='通過√' data-emsg='請輸入中文' id='regUser' data-tmsg='msgU' /><span id='msgU'></span></p> <p><input type="text" value='郵箱驗證' data-reg='email' data-smsg='通過√' data-emsg='請輸入郵箱' id='regEmail' data-tmsg='msgE' /><span id='msgE'></span></p> <p><input type="text" value='電話驗證' data-reg='phone' data-smsg='通過√' data-emsg='請輸入電話' id='regPhone' data-tmsg='msgP' /><span id='msgP'></span></p> <p><input type="text" value='帶小數位的數字驗證' data-reg='decimalNumber' data-smsg='通過√' data-emsg='請輸入小數數字' id='regNumber' data-tmsg='msgN' /><span id='msgN'></span></p> <script type="text/javascript"> window.onload = function() { var getRegular = function(rstr) { var regData = {}; //正則資料儲存域 regData.rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g; // 去除空格的正則 regData.Chinese = /[\u4e00-\u9fa5]/g; //中文 regData.nonumber = /\D/g; //數字 regData.nochinese = /[^\u4e00-\u9fa5]/g; //非中文 regData.email = /^\s*[a-zA-Z0-9]+(([\._\-]?)[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([_\-][a-zA-Z0-9]+)*(\.[a-zA-Z0-9]+([_\-][a-zA-Z0-9]+)*)+\s*$/; //郵件 regData.phone = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,})){0,}$/; //電話 regData.decimalNumber = /^\d+(\.\d+)+$/; //帶小數位的數字 regData.htmlTags = /<[\/\!]*[^<>]*>/ig; //html return regData[rstr]; }, forElementArr = function(_elementArr, callBack) { var arr = _elementArr, self = this; if (!(_elementArr instanceof Array)) { arr = [_elementArr]; }; for (var i = 0, arrLen = arr.length; i < arrLen; i++) { var arrI = arr[i]; if (typeof arrI == "string") { arrI = self.getElement(arrI); } callBack && callBack(i, arrI); } }, verification = function(str, reg) { return getRegular(reg).test(str); }, setCss = function(_this, cssOption) { if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) { return; } for (var cs in cssOption) { _this.style[cs] = cssOption[cs]; } return _this; }; forElementArr([ document.getElementById("regUser"), document.getElementById("regEmail"), document.getElementById("regPhone"), document.getElementById("regNumber") ], function(index, _this) { _this.onkeyup = function() { var _v = this.value.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ""), //獲取被處理的元素值 _reg = this.getAttribute("data-reg"), //獲取正則 __reg = _reg.indexOf(",") > 0 ? _reg.split(",") : [_reg], //如果含有“,”則將其轉換成多陣列 _regLen = __reg.length, //陣列長度 _emsg = this.getAttribute("data-emsg"), //錯誤資訊顯示 _smsg = this.getAttribute("data-smsg"), //通過資訊顯示 _target = document.getElementById(this.getAttribute("data-tmsg")), //獲取顯示資訊的元素 i = 0; for (; i < _regLen; i++) { if (!verification(_v, __reg[i])) { _target.innerHTML = _emsg; setCss(_target, { "color": "red" }) return; } } _target.innerHTML = _smsg; setCss(_target, { "color": "green" }) } }); }; </script> </body> </html>