您的位置：首页 > Web前端 > JavaScript

javascript 用面向对象自写前端验证工具

2014-04-23 17:12 387 查看

此验证工具需要自少传入两个dom对象（验证input对象，错误消息显示位置对象）

也可以传入三个参数（验证input对象，错误消息显示位置对象，自定义错误消息）

也可以传入四个参数（验证input对象，错误消息显示位置对象，自定义验证正则表达式，自定义错误消息）

function Validata(){
var regName=/^[a-zA-Z]{4,6}$/;
var errorName="帐号4~6之间";
var regIphone=/^1[358]\d{9}$/;
var errorIphone="手机号码不正确";
var regEmail=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.(com|cn)$/;
var errorEmail="邮箱不正确";
var regAddress=/^[\u4E00-\u9FA5]{4,8}$/;
var errorAddress="地址需要在四位到八位";

if(!(Validata.iname)){
Validata.prototype.name=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorName=sReg;
}else{
regName=sReg;
}
}
if(sError){
errorName=sError;
}
if(!(regName.test(oObj.value))){
oP.innerHTML=errorName;
Validata.iname="ss";
return true;
}
}
Validata.iname="ss";
}

if(!(Validata.iIphone)){
Validata.prototype.iphone=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorIphone=sReg;
}else{
regIphone=sReg;
}
}
if(sError){
errorIphone=sError;
}
if(!(regIphone.test(oObj.value))){
oP.innerHTML=errorIphone;
Validata.iIphone="ss";
return true;
}
}
Validata.iIphone="ss";
}
if(!(Validata.iEmail)){
Validata.prototype.email=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorEmail=sReg;
}else{
regEmail=sReg;
}
}
if(sError){
errorEmail=sError;
}
if(!(regEmail.test(oObj.value))){
oP.innerHTML=errorEmail;
Validata.iEmail="ss";
return true;
}
}
Validata.iEmail="ss";
}
if(!(Validata.iAddress)){
Validata.prototype.address=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorAddress=sReg;
}else{
regAddress=sReg;
}
}
if(sError){
errorAddress=sError;
}
if(!(regAddress.test(oObj.value))){
oP.innerHTML=errorAddress;
Validata.iAddress="ss";
return true;
}
}
Validata.iAddress="ss";
}
}

使用例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'validata.jsp' starting page</title>
<script type="text/javascript">
window.onload=function(){
var oForm=document.getElementById("f1");
var aP=document.getElementsByTagName("p");
var va= new Validata();
oForm.onsubmit=function(){

var op=document.getElementById("0");
if(va.name(op,aP[0],/^[A-Z]{3,4}$/,"hhhhhhhhhhhhhhhhh")){
return false;
}
var op=document.getElementById("1");
if(va.email(op,aP[1])){
return false;
}
var op=document.getElementById("2");
if(va.iphone(op,aP[2])){
return false;
}
var op=document.getElementById("3");
if(va.address(op,aP[3])){
return false;
}
return true;
}
}

function Validata(){
var regName=/^[a-zA-Z]{4,6}$/;
var errorName="帐号4~6之间";
var regIphone=/^1[358]\d{9}$/;
var errorIphone="手机号码不正确";
var regEmail=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.(com|cn)$/;
var errorEmail="邮箱不正确";
var regAddress=/^[\u4E00-\u9FA5]{4,8}$/;
var errorAddress="地址需要在四位到八位";

if(!(Validata.iname)){
Validata.prototype.name=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorName=sReg;
}else{
regName=sReg;
}
}
if(sError){
errorName=sError;
}
if(!(regName.test(oObj.value))){
oP.innerHTML=errorName;
Validata.iname="ss";
return true;
}
}
Validata.iname="ss";
}

if(!(Validata.iIphone)){
Validata.prototype.iphone=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorIphone=sReg;
}else{
regIphone=sReg;
}
}
if(sError){
errorIphone=sError;
}
if(!(regIphone.test(oObj.value))){
oP.innerHTML=errorIphone;
Validata.iIphone="ss";
return true;
}
}
Validata.iIphone="ss";
}
if(!(Validata.iEmail)){
Validata.prototype.email=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorEmail=sReg;
}else{
regEmail=sReg;
}
}
if(sError){
errorEmail=sError;
}
if(!(regEmail.test(oObj.value))){
oP.innerHTML=errorEmail;
Validata.iEmail="ss";
return true;
}
}
Validata.iEmail="ss";
}
if(!(Validata.iAddress)){
Validata.prototype.address=function(oObj,oP,sReg,sError){
if(sReg){

if(typeof(sReg)=="string"){

errorAddress=sReg;
}else{
regAddress=sReg;
}
}
if(sError){
errorAddress=sError;
}
if(!(regAddress.test(oObj.value))){
oP.innerHTML=errorAddress;
Validata.iAddress="ss";
return true;
}
}
Validata.iAddress="ss";
}
}
</script>

</head>

<body>
<form id="f1"  action="www.baidu.com">
账号：<input type="text" id="0"><p></p><br>
邮箱：<input type="text" id="1"><p></p><br>
电话：<input type="text" id="2"><p></p><br>
地址：<input type="text" id="3"><p></p><br>

<input type="submit" value="提交"><br>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航