一个实用的JS表单验证提示效果

admin

2010年3月7日 23:22 本文热度 12366

[p]一个流行且实用的js表单验证提示，演示了怎么自定义错误信息的显示方式，同时通过写formvalid.showerror类方法来实现错误显示方式自定义： errmsg 是一个错误消息的数组，这样方便自定义,errname是对应错误信息元件名数组，这样可以非富自定义显示方式，formvalid.allname记录了所有有验证规则的字段名数级，在自定义中可以使用到。[/p]
[p] [/p]
[p][br][br][br]表单验证提示效果[br][br]<script language="javascript" type="text/javascript">[br]var formvalid = function(frm) {[br] this.frm = frm;[br] this.errmsg = new array();[br] this.errname = new array();[br] [br] this.required = function(inputobj) {[br] if (typeof(inputobj) == "undefined" || inputobj.value.trim() == "") {[br] return false;[br] }[br] return true;[br] }[br] [br] this.eqaul = function(inputobj, formelements) {[br] var fstobj = inputobj;[br] var sndobj = formelements[inputobj.getattribute('eqaulname')];[br] [br] if (fstobj != null && sndobj != null) {[br] if (fstobj.value != sndobj.value) {[br] return false;[br] }[br] }[br] return true;[br] }[/p]
[p] this.gt = function(inputobj, formelements) {[br] var fstobj = inputobj;[br] var sndobj = formelements[inputobj.getattribute('eqaulname')];[br] [br] if (fstobj != null && sndobj != null && fstobj.value.trim()!='' && sndobj.value.trim()!='') {[br] if (fstobj.value <= sndobj.value) {[br] return false;[br] }[br] }[br] return true;[br] }[/p]
[p] this.compare = function(inputobj, formelements) {[br] var fstobj = inputobj;[br] var sndobj = formelements[inputobj.getattribute('objectname')];[br] if (fstobj != null && sndobj != null && fstobj.value.trim()!='' && sndobj.value.trim()!='') {[br] if (!eval('fstobj.value' + inputobj.getattribute('operate') + 'sndobj.value')) {[br] return false;[br] }[br] }[br] return true;[br] }[br] [br] this.limit = function (inputobj) {[br] var len = inputobj.value.length;[br] if (len) {[br] var minv = inputobj.getattribute('min');[br] var maxv = inputobj.getattribute('max');[br] minv = minv || 0;[br] maxv = maxv || number.max_value;[br] return minv <= len && len <= maxv;[br] }[br] return true;[br] }[br] [br] this.range = function (inputobj) {[br] var val = parseint(inputobj.value);[br] if (inputobj.value) {[br] var minv = inputobj.getattribute('min');[br] var maxv = inputobj.getattribute('max');[br] minv = minv || 0;[br] maxv = maxv || number.max_value;[br] [br] return minv <= val && val <= maxv;[br] }[br] return true;[br] }[br] [br] this.requirechecked = function (inputobj) {[br] var minv = inputobj.getattribute('min');[br] var maxv = inputobj.getattribute('max');[br] minv = minv || 1;[br] maxv = maxv || number.max_value;[br] [br] var checked = 0;[br] var groups = document.getelementsbyname(inputobj.name);[br] [br] for(var i=0;i [p] if (inputobj.value == '') {[br] return;[br] } else {[br] if (!reg.test(inputobj.value)) {[br] this.adderrormsg(inputobj.name,msg);[br] }[br] }[br] }[/p]
[p] this.passed = function() {[br] if (this.errmsg.length > 0) {[br] formvalid.showerror(this.errmsg,this.errname);[br] frt = document.getelementsbyname(this.errname[0])[0];[br] [br] if (frt.type!='radio' && frt.type!='checkbox') {[br] frt.focus();[br] }[br] return false;[br] } else {[br] return true;[br] }[br] }[/p]
[p] this.adderrormsg = function(name,str) {[br] this.errmsg.push(str);[br] this.errname.push(name);[br] }[br] [br] this.addallname = function(name) {[br] formvalid.allname.push(name);[br] }[br] [br]}[br]formvalid.allname = new array();[br]formvalid.showerror = function(errmsg) {[br] var msg = "";[br] for (i = 0; i < errmsg.length; i++) {[br] msg += "- " + errmsg[i] + "\n";[br] }[/p]
[p] alert(msg);[br]}[br]function validator(frm) {[br] var formelements = frm.elements;[br] var fv = new formvalid(frm);[br] [br] for (var i=0; i [p] var vts = validtype.split('|');[br] var ems = errormsg.split('|');[br] for (var j=0; j\"\"])*$/;[br]regexps.isdate = /^\d{4}-\d{1,2}-\d{1,2}$/;[br]regexps.istime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/;[br]</script>[br]<script type="text/javascript">[br]function addloadevent(func) {[br] var oldonload = window.onload;[br] if (typeof window.onload != 'function') {[br] window.onload = func;[br] } else {[br] window.onload = function() {[br] oldonload();[br] func();[br] }[br] }[br]}[/p]
[p]function prepareinputsforhints() {[br] var inputs = document.getelementsbytagname("input");[br] for (var i=0; i[br]formvalid.showerror = function(errmsg,errname) {[br] for (key in formvalid.allname) {[br] document.getelementbyid('errmsg_'+formvalid.allname[key]).innerhtml = '';[br] }[br] for (key in errmsg) {[br] document.getelementbyid('errmsg_'+errname[key]).innerhtml = errmsg[key];[br] }[br]}[br]</script>[/p]
[p][br][br]