实用的JS表单验证提示效果 时间:2020-05-12 人气:0 errMsg 是一个错误消息的数组,这样方便自定义,errName是对应错误信息元件名数组,这样可以非富自定义显示方式,FormValid.allName记录了所有有验证规则的字段名数级,在自定义中可以使用到。 表单验证提示效果 <script language="JavaScript" type="text/javascript"> var FormValid = function(frm) { this.frm = frm; this.errMsg = new Array(); this.errName = new Array(); this.required = function(inputObj) { if (typeof(inputObj) == "undefined" || inputObj.value.trim() == "") { return false; } return true; } this.eqaul = function(inputObj, formElements) { var fstObj = inputObj; var sndObj = formElements[inputObj.getAttribute('eqaulName')]; if (fstObj != null && sndObj != null) { if (fstObj.value != sndObj.value) { return false; } } return true; } this.gt = function(inputObj, formElements) { var fstObj = inputObj; var sndObj = formElements[inputObj.getAttribute('eqaulName')]; if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') { if (fstObj.value <= sndObj.value) { return false; } } return true; } this.compare = function(inputObj, formElements) { var fstObj = inputObj; var sndObj = formElements[inputObj.getAttribute('objectName')]; if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') { if (!eval('fstObj.value' + inputObj.getAttribute('operate') + 'sndObj.value')) { return false; } } return true; } this.limit = function (inputObj) { var len = inputObj.value.length; if (len) { var minv = inputObj.getAttribute('min'); var maxv = inputObj.getAttribute('max'); minv = minv || 0; maxv = maxv || Number.MAX_VALUE; return minv <= len && len <= maxv; } return true; } this.range = function (inputObj) { var val = parseInt(inputObj.value); if (inputObj.value) { var minv = inputObj.getAttribute('min'); var maxv = inputObj.getAttribute('max'); minv = minv || 0; maxv = maxv || Number.MAX_VALUE; return minv <= val && val <= maxv; } return true; } this.requireChecked = function (inputObj) { var minv = inputObj.getAttribute('min'); var maxv = inputObj.getAttribute('max'); minv = minv || 1; maxv = maxv || Number.MAX_VALUE; var checked = 0; var groups = document.getElementsByName(inputObj.name); for(var i=0;i 0) { FormValid.showError(this.errMsg,this.errName); frt = document.getElementsByName(this.errName[0])[0]; if (frt.type!='radio' && frt.type!='checkbox') { frt.focus(); } return false; } else { return true; } } this.addErrorMsg = function(name,str) { this.errMsg.push(str); this.errName.push(name); } this.addAllName = function(name) { FormValid.allName.push(name); } } FormValid.allName = new Array(); FormValid.showError = function(errMsg) { var msg = ""; for (i = 0; i < errMsg.length; i++) { msg += "- " + errMsg[i] + "\n"; } alert(msg); } function validator(frm) { var formElements = frm.elements; var fv = new FormValid(frm); for (var i=0; i\"\"])*$/; RegExps.isDate = /^\d{4}-\d{1,2}-\d{1,2}$/; RegExps.isTime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/; </script> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i FormValid.showError = function(errMsg,errName) { for (key in FormValid.allName) { document.getElementById('errMsg_'+FormValid.allName[key]).innerHTML = ''; } for (key in errMsg) { document.getElementById('errMsg_'+errName[key]).innerHTML = errMsg[key]; } } </script> 表单验证提示效果 帐号: 注册帐号(只支持数字和字母,如:love,love520) 密码: 请输入密码,请最少输入最少6位最多12位密码 确认密码: 请再输入一次上面的密码 邮箱: 请输入邮箱(Email),推荐使用网易邮箱@163.com 生日: 1983 1984 1985 年 5 6 7 12 月 5 6 7 12 日请输入你的生日 QQ/MSN: 请输入你的QQ或MSN号码 电话: 请输入你的电话 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容