- 浏览: 15936 次
- 性别:
- 来自: 深圳
最新评论
简单JS自定义验证提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FormValid Demo3 自定义错误信息显示方式2</title>
<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<groups.length;i++) {
if(groups[i].checked) checked++;
}
return minv <= checked && checked <= maxv;
}
this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g,
allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}
this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim();
if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
}
this.passed = function() {
if (this.errMsg.length > 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<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name);
var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];
switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps
[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp
(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')
+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements
[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d
{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
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">
FormValid.showError = function(errMsg) {
var msg = '';
for (key in errMsg) {
msg += errMsg[key] + '<br>';
}
document.getElementById('errorMsg').innerHTML = msg;
}
</script>
<script type="text/javascript">
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>
</head>
<body><h2>FormValid Demo3 自定义错误信息显示方式2</h2>
<table width="400" border="0" cellpadding="3" cellspacing="0">
<form id="form1" name="form1" method="post" onsubmit="return validator(this)" action="">
<tr>
<td width="100">用户名:</td>
<td><input name="username" type="text" valid="required" errmsg="用户名不能为空!"
/><span id="errMsg_username" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input name="passwd" type="password" id="passwd" valid="required" errmsg="密码
不能为空!" /><span id="errMsg_passwd" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input name="passwd2" type="password" id="passwd2" valid="eqaul"
eqaulName="passwd" errmsg="两次密码不同!" /><span id="errMsg_passwd2"
style="color:#FF0000"></span></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" valid="required|isEmail" errmsg="Email不
能为空|Email格式不对!" /><span id="errMsg_Email" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>手机</td>
<td><input name="mobile" type="text" id="mobile" valid="isMobile" errmsg="手机格式不
对!" /><span id="errMsg_mobile" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input name="birthday" type="text" id="birthday" valid="isDate" errmsg="生日格式不
对!" /><span id="errMsg_birthday" style="color:#FF0000"></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" /></td>
</tr>
</form>
</table>
<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FormValid Demo3 自定义错误信息显示方式2</title>
<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<groups.length;i++) {
if(groups[i].checked) checked++;
}
return minv <= checked && checked <= maxv;
}
this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g,
allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}
this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim();
if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
}
this.passed = function() {
if (this.errMsg.length > 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<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name);
var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];
switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps
[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp
(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')
+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements
[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d
{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
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">
FormValid.showError = function(errMsg) {
var msg = '';
for (key in errMsg) {
msg += errMsg[key] + '<br>';
}
document.getElementById('errorMsg').innerHTML = msg;
}
</script>
<script type="text/javascript">
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>
</head>
<body><h2>FormValid Demo3 自定义错误信息显示方式2</h2>
<table width="400" border="0" cellpadding="3" cellspacing="0">
<form id="form1" name="form1" method="post" onsubmit="return validator(this)" action="">
<tr>
<td width="100">用户名:</td>
<td><input name="username" type="text" valid="required" errmsg="用户名不能为空!"
/><span id="errMsg_username" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input name="passwd" type="password" id="passwd" valid="required" errmsg="密码
不能为空!" /><span id="errMsg_passwd" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input name="passwd2" type="password" id="passwd2" valid="eqaul"
eqaulName="passwd" errmsg="两次密码不同!" /><span id="errMsg_passwd2"
style="color:#FF0000"></span></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" valid="required|isEmail" errmsg="Email不
能为空|Email格式不对!" /><span id="errMsg_Email" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>手机</td>
<td><input name="mobile" type="text" id="mobile" valid="isMobile" errmsg="手机格式不
对!" /><span id="errMsg_mobile" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input name="birthday" type="text" id="birthday" valid="isDate" errmsg="生日格式不
对!" /><span id="errMsg_birthday" style="color:#FF0000"></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" /></td>
</tr>
</form>
</table>
<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FormValid Demo3 自定义错误信息显示方式2</title>
<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<groups.length;i++) {
if(groups[i].checked) checked++;
}
return minv <= checked && checked <= maxv;
}
this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g,
allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}
this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim();
if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
}
this.passed = function() {
if (this.errMsg.length > 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<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name);
var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];
switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps
[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp
(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')
+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements
[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d
{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
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">
FormValid.showError = function(errMsg) {
var msg = '';
for (key in errMsg) {
msg += errMsg[key] + '<br>';
}
document.getElementById('errorMsg').innerHTML = msg;
}
</script>
<script type="text/javascript">
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>
</head>
<body><h2>FormValid Demo3 自定义错误信息显示方式2</h2>
<table width="400" border="0" cellpadding="3" cellspacing="0">
<form id="form1" name="form1" method="post" onsubmit="return validator(this)" action="">
<tr>
<td width="100">用户名:</td>
<td><input name="username" type="text" valid="required" errmsg="用户名不能为空!"
/><span id="errMsg_username" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input name="passwd" type="password" id="passwd" valid="required" errmsg="密码
不能为空!" /><span id="errMsg_passwd" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input name="passwd2" type="password" id="passwd2" valid="eqaul"
eqaulName="passwd" errmsg="两次密码不同!" /><span id="errMsg_passwd2"
style="color:#FF0000"></span></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" valid="required|isEmail" errmsg="Email不
能为空|Email格式不对!" /><span id="errMsg_Email" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>手机</td>
<td><input name="mobile" type="text" id="mobile" valid="isMobile" errmsg="手机格式不
对!" /><span id="errMsg_mobile" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input name="birthday" type="text" id="birthday" valid="isDate" errmsg="生日格式不
对!" /><span id="errMsg_birthday" style="color:#FF0000"></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" /></td>
</tr>
</form>
</table>
<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>FormValid Demo3 自定义错误信息显示方式2</title>
<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<groups.length;i++) {
if(groups[i].checked) checked++;
}
return minv <= checked && checked <= maxv;
}
this.filter = function (inputObj) {
var value = inputObj.value;
var allow = inputObj.getAttribute('allow');
if (value.trim()) {
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g,
allow.split(/\s*,\s*/).join("|")), "gi").test(value);
}
return true;
}
this.isNo = function (inputObj) {
var value = inputObj.value;
var noValue = inputObj.getAttribute('noValue');
return value!=noValue;
}
this.checkReg = function(inputObj, reg, msg) {
inputObj.value = inputObj.value.trim();
if (inputObj.value == '') {
return;
} else {
if (!reg.test(inputObj.value)) {
this.addErrorMsg(inputObj.name,msg);
}
}
}
this.passed = function() {
if (this.errMsg.length > 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<formElements.length;i++) {
var validType = formElements[i].getAttribute('valid');
var errorMsg = formElements[i].getAttribute('errmsg');
if (validType==null) continue;
fv.addAllName(formElements[i].name);
var vts = validType.split('|');
var ems = errorMsg.split('|');
for (var j=0; j<vts.length; j++) {
var curValidType = vts[j];
var curErrorMsg = ems[j];
switch (curValidType) {
case 'isNumber':
case 'isEmail':
case 'isPhone':
case 'isMobile':
case 'isIdCard':
case 'isMoney':
case 'isZip':
case 'isQQ':
case 'isInt':
case 'isEnglish':
case 'isChinese':
case 'isUrl':
case 'isDate':
case 'isTime':
fv.checkReg(formElements[i],RegExps
[curValidType],curErrorMsg);
break;
case 'regexp':
fv.checkReg(formElements[i],new RegExp
(formElements[i].getAttribute('regexp'),"g"),curErrorMsg);
break;
case 'custom':
if (!eval(formElements[i].getAttribute('custom')
+'(formElements[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
default :
if (!eval('fv.'+curValidType+'(formElements
[i],formElements)')) {
fv.addErrorMsg(formElements
[i].name,curErrorMsg);
}
break;
}
}
}
return fv.passed();
}
String.prototype.trim = function() {
return this.replace(/^\s*|\s*$/g, "");
}
var RegExps = function(){};
RegExps.isNumber = /^[-\+]?\d+(\.\d+)?$/;
RegExps.isEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)/;
RegExps.isPhone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d
{1,4})?$/;
RegExps.isMobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
RegExps.isIdCard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;
RegExps.isMoney = /^\d+(\.\d+)?$/;
RegExps.isZip = /^[1-9]\d{5}$/;
RegExps.isQQ = /^[1-9]\d{4,10}$/;
RegExps.isInt = /^[-\+]?\d+$/;
RegExps.isEnglish = /^[A-Za-z]+$/;
RegExps.isChinese = /^[\u0391-\uFFE5]+$/;
RegExps.isUrl = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
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">
FormValid.showError = function(errMsg) {
var msg = '';
for (key in errMsg) {
msg += errMsg[key] + '<br>';
}
document.getElementById('errorMsg').innerHTML = msg;
}
</script>
<script type="text/javascript">
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>
</head>
<body><h2>FormValid Demo3 自定义错误信息显示方式2</h2>
<table width="400" border="0" cellpadding="3" cellspacing="0">
<form id="form1" name="form1" method="post" onsubmit="return validator(this)" action="">
<tr>
<td width="100">用户名:</td>
<td><input name="username" type="text" valid="required" errmsg="用户名不能为空!"
/><span id="errMsg_username" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input name="passwd" type="password" id="passwd" valid="required" errmsg="密码
不能为空!" /><span id="errMsg_passwd" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input name="passwd2" type="password" id="passwd2" valid="eqaul"
eqaulName="passwd" errmsg="两次密码不同!" /><span id="errMsg_passwd2"
style="color:#FF0000"></span></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" valid="required|isEmail" errmsg="Email不
能为空|Email格式不对!" /><span id="errMsg_Email" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>手机</td>
<td><input name="mobile" type="text" id="mobile" valid="isMobile" errmsg="手机格式不
对!" /><span id="errMsg_mobile" style="color:#FF0000"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input name="birthday" type="text" id="birthday" valid="isDate" errmsg="生日格式不
对!" /><span id="errMsg_birthday" style="color:#FF0000"></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" /></td>
</tr>
</form>
</table>
<div id="errorMsg" style="width:400px; color:#FF0000" align="center"> </div>
</body>
</html>
- 网页制作:动态HTML教程exe.zip (383.6 KB)
- 下载次数: 2
- javascript_源代码集.rar (307.2 KB)
- 下载次数: 2
- Notepad_5.9.0.rar (5.2 MB)
- 下载次数: 1
- Shell脚本学习指南.part4.rar (4.7 MB)
- 下载次数: 0
- Shell脚本学习指南.part2.rar (4.7 MB)
- 下载次数: 0
- Shell脚本学习指南.part1.rar (4.7 MB)
- 下载次数: 0
- Shell脚本学习指南.part3.rar (4.7 MB)
- 下载次数: 0
- Shell脚本学习指南.part6.rar (3.4 MB)
- 下载次数: 0
- Shell脚本学习指南.part5.rar (4.7 MB)
- 下载次数: 0
- js.zip (26.2 KB)
- 下载次数: 2
相关推荐
总结,这个"js 验证 自定义 类"框架旨在提供一种高效、灵活和可扩展的JavaScript验证解决方案。通过其内置的基本验证功能和自定义规则的能力,开发者可以轻松应对各种数据验证需求,同时保持良好的用户体验。结合...
在IT行业中,自定义验证控件是Web开发中不可或缺的一部分,尤其是在使用JavaScript(JS)和.NET框架时。本文将深入探讨如何使用这两种技术创建自定义验证控件,并提供相关知识点。 首先,JavaScript作为客户端脚本...
**jQuery自定义验证**是一种强大的前端验证解决方案,它允许开发者根据项目需求定制验证规则和提示信息,提升用户体验。本文将深入探讨jQuery自定义验证的核心概念、功能和应用场景,以及如何利用正则表达式和非空...
本文将深入探讨JavaScript(简称js)在表单验证中的应用,包括基础验证方法以及如何实现自定义验证。 一、JavaScript表单验证基础 1. 验证事件:在JavaScript中,我们可以监听表单的`submit`事件,当用户尝试提交...
`setCustomValidity`方法就是用来设置自定义验证信息的,当验证失败时,这个信息将在表单提交时显示给用户。 除了`setCustomValidity`,还可以使用`checkValidity`方法检查整个表单是否有效,以及`validity`属性来...
"漂亮js表单验证提示效果"是一个专注于提供美观、友好的表单验证解决方案的资源。这个压缩包可能包含一个或多个JavaScript文件,用于实现这些动态的验证提示效果。 首先,我们需要理解JavaScript表单验证的基本原理...
这意味着开发者可以根据自己的需求或者项目的视觉风格,自由设计验证提示的样式和交互效果。这可能包括改变错误消息的显示方式,定制验证图标,甚至调整整个验证过程的用户体验。 在压缩包文件"Demo"中,通常会包含...
在IT行业中,自定义JavaScript提示框是一个常见的需求,特别是在网页应用和交互设计中。传统的JavaScript提供了`prompt`、`alert`和`confirm`这三种基本的提示方式,但它们的功能和样式较为有限,无法满足复杂场景下...
本主题将深入探讨“表单验证自定义验证规则和错误信息”,帮助开发者构建更加灵活、用户体验良好的表单验证机制。 表单验证的基本流程通常包括以下步骤: 1. **前端验证**:在用户提交表单前,通过JavaScript或...
4. **集成到页面**: 将自定义验证控件添加到ASP.NET页面中,像使用内置验证控件一样设置属性,并确保页面的`ValidationGroup`属性与控件匹配,以便正确地触发验证。 5. **测试和调试**: 使用浏览器的开发者工具(如...
1. 效果美观:验证提示信息直观且易于理解,增强了用户体验。 2. 功能强大:支持多种验证规则,如必填项、电子邮件格式、手机号码、数字范围等。 3. 调用简单:只需少量代码即可实现丰富的验证效果,降低了开发难度...
7. **使用第三方库**:像Validator.js、 parsley.js 或其他类似的JavaScript库可以提供更丰富的验证效果和自定义选项。 总的来说,ASP.NET验证提示的美化是一个涉及前端设计和后端逻辑的过程。通过对验证控件样式...
在IT行业中,尤其是在前端开发领域,创建一个自定义的车牌号码输入框并实现特定的验证功能是一项常见的任务。本项目标题和描述指出,我们需要构建一个输入框,允许用户自定义输入车牌号码,并确保输入的内容符合新...
这个插件允许开发者自定义验证规则和错误提示样式,从而实现用户友好的交互体验。在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始...
**jQuery Validate 自定义验证规则详解** 在Web开发中,表单验证是不可或缺的一部分,它可以确保用户输入的数据符合预设的规范,从而保证数据的准确性和安全性。jQuery Validate 是一个非常流行的JavaScript库,它...
总结,用JavaScript进行错误提示不仅涉及基本的验证逻辑,还包括了DOM操作、CSS样式、动画效果等多方面的技术。通过合理的错误处理和良好的用户体验设计,我们可以创建出既美观又实用的错误提示系统。同时,考虑无...
在JavaScript编程中,常见语句和简单的验证是创建交互式网页和确保用户输入数据有效性的基础。本话题将深入探讨JavaScript中的关键语句以及如何进行简单的表单验证。 1. **条件语句**:在上述代码中,可以看到`if.....