今天写的一个自动校验表单数据的js小控件［可扩展］
2007-08-30 16:27
881 查看
<script type="text/javascript" src="scripts/yesun.js"></script>
<script type="text/javascript">
function UserLogin()
{
var rm = new Yesun.RuleModel([
{id:'username', name:'用户名', isEmpty: false, maxLength:20},
{id:'email', name:'电子邮件', isEmail:true, maxLength:20},
{id:'mobile', name:'手机号码', isTel:true, maxLength:13},
{id:'birthday', name:'出生年月', isDate:true},
{id:'password', name:'密码', isEmpty: false, minLength:6}
]);
var vl = new Yesun.Validate(rm);
var result = vl.Run();
if(result == true)
alert('校验完成,开始提交数据...');
}
</script>
</head>
<body>
<div>
<ul>
<li>UserName : <input type="text" id="username"/></li>
<li>Password : <input type="password" id="password"/></li>
<li>Email : <input type="text" id="email"/></li>
<li>Mobile : <input type="text" id="mobile"/></li>
<li>Birthday : <input type="text" id="birthday"/></li>
</ul>
<input type="button" onclick="javascript:UserLogin();" value="确定"/>
</div>
</body>
JS类库
/*---功能：自定义Js组件
Date:2007-8-30
Author:yesun
--------------------------------------------*/
var Yesun = {};
Yesun.Validate = function (ruleModel)
{
this.browser = navigator.appVersion;
this.ruleModel = ruleModel;
//校验数据
this.Run = function()
{
for(var i=0;i<this.ruleModel.length;i++)
{
var id = this.ruleModel.getId(i);
if(typeof(document.getElementById(id)) == "#ff0000")
{
alert("页面上不存在控件["+id+"]");
}
else
{
var obj = document.getElementById(id);
//IsEmpty
if(this.ruleModel.getIsEmpty(i) == false)
{
if(obj.value == null || obj.value == "")
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不能为空");
obj.focus();
obj.select();
return false;
}
}
//IsEmail
if(this.ruleModel.getIsEmail(i) == true)
{
if(obj.value !="" && IsEmail(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsNumber
if(this.ruleModel.getIsNumber(i) == true)
{
if(obj.value !="" && IsNumber(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsDate
if(this.ruleModel.getIsDate(i) == true)
{
if(obj.value !="" && IsDate(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsDateTime
if(this.ruleModel.getIsDateTime(i) == true)
{
if(obj.value !="" && IsDateTime(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsTime
if(this.ruleModel.getIsTime(i) == true)
{
if(obj.value !="" && IsTime(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsTel
if(this.ruleModel.getIsTel(i) == true)
{
if(obj.value !="" && IsTel(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsIp
if(this.ruleModel.getIsIp(i) == true)
{
if(obj.value !="" && IsIp(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//MaxLength
if(this.ruleModel.getMaxLength(i) > 0)
{
if(obj.value !="" && obj.value.length > this.ruleModel.getMaxLength(i))
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"超出最大长度"+
this.ruleModel.getMaxLength(i) +"个字符");
obj.focus();
obj.select();
return false;
}
}
//MinLength
if(this.ruleModel.getMinLength(i) > 0)
{
if(obj.value !="" && obj.value.length < this.ruleModel.getMinLength(i))
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"最小长度不能少于"+
this.ruleModel.getMinLength(i) +"个字符");
obj.focus();
obj.select();
return false;
}
}
//可继续扩展
//TODO
}
}
return true;
}
/*---若干私有方法
-------------------*/
//是否为电子邮件
function IsEmail(s)
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(s))
return true;
else
return false;
}
//是否为IP
function IsIp(s)
{
var
reg=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if(reg.test(s))
return true;
else
return false;
}
//验证电话号码，只允许数字和“-”
function IsTel(s)
{
var reg = /[\d|-]{7,15}/;
if(reg.test(s))
return true;
else
return false;
}
//验证身份证号码
function IsIdno(s){
if (s==""){ return confirm("没有填写身份证号，这样将无法判定其生日！\n确定继续吗？");}
if (s.length != 15 & s.length != 18){
alert("请填入正确的身份证号码");
return false;
}
if (IsNumber(s.substring(0,17))){
alert("请填入正确的身份证号码");
return false;
}
if (IsNumber(s.substring(17,18)) & s.substring(17,18) != "x" & s.substring(17,18) != "X"){
alert("请填入正确的身份证号码");
return false;
}
return true;
}
//含有非数字字符 返回 true
function IsNumber(s){ //适于校验非负整数
var reg = /^[01233456789]{1,}$/;
if(reg.test(s))
return true;
else
return false;
}
//判断日期是否合法
function IsDate(s)
{
//对日期格式进行验证 要求为2000-2099年 格式为 yyyy-mm-dd 并且可以正常转换成正确的日期
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
if(reg.test(s))
return true;
else
return false;
}
function IsDateTime(s)
{
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
if(reg.test(s))
return true;
else
return false;
}
function IsTime(s)
{
var a = s.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
if (a == null) {return false;}
if (a[1]>24 || a[3]>60 || a[4]>60)
{
return false
}
return true;
}
}
//RuleModel - 校验规则
Yesun.RuleModel = function(config)
{
this.config = config;
this.length = config.length;
this.lookup={};
for(var i=0;i<this.length;i++){
if(typeof this.config[i].id=="undefined"){this.config[i].id=i;}
this.lookup[this.config[i].id]=this.config[i];
}
this.getId = function(col){return this.config[col].id;},
this.getName = function(col){return this.config[col].name;},
this.getIsEmpty = function(col){return this.config[col].isEmpty;}
this.getIsEmail = function(col){return this.config[col].isEmail;}
this.getIsNumber = function(col){return this.config[col].isNumber;}
this.getIsTel = function(col){return this.config[col].isTel;}
this.getIsIp = function(col){return this.config[col].isIp;}
this.getIsDate = function(col){return this.config[col].isDate;}
this.getIsTime = function(col){return this.config[col].isTime;}
this.getIsDateTime = function(col){return this.config[col].isDateTime;}
this.getMaxLength = function(col){return this.config[col].maxLength;}
this.getMinLength = function(col){return this.config[col].minLength;}
this.getErrorMsg = function(col){return this.config[col].errorMsg;}
}
<script type="text/javascript">
function UserLogin()
{
var rm = new Yesun.RuleModel([
{id:'username', name:'用户名', isEmpty: false, maxLength:20},
{id:'email', name:'电子邮件', isEmail:true, maxLength:20},
{id:'mobile', name:'手机号码', isTel:true, maxLength:13},
{id:'birthday', name:'出生年月', isDate:true},
{id:'password', name:'密码', isEmpty: false, minLength:6}
]);
var vl = new Yesun.Validate(rm);
var result = vl.Run();
if(result == true)
alert('校验完成,开始提交数据...');
}
</script>
</head>
<body>
<div>
<ul>
<li>UserName : <input type="text" id="username"/></li>
<li>Password : <input type="password" id="password"/></li>
<li>Email : <input type="text" id="email"/></li>
<li>Mobile : <input type="text" id="mobile"/></li>
<li>Birthday : <input type="text" id="birthday"/></li>
</ul>
<input type="button" onclick="javascript:UserLogin();" value="确定"/>
</div>
</body>
JS类库
/*---功能：自定义Js组件
Date:2007-8-30
Author:yesun
--------------------------------------------*/
var Yesun = {};
Yesun.Validate = function (ruleModel)
{
this.browser = navigator.appVersion;
this.ruleModel = ruleModel;
//校验数据
this.Run = function()
{
for(var i=0;i<this.ruleModel.length;i++)
{
var id = this.ruleModel.getId(i);
if(typeof(document.getElementById(id)) == "#ff0000")
{
alert("页面上不存在控件["+id+"]");
}
else
{
var obj = document.getElementById(id);
//IsEmpty
if(this.ruleModel.getIsEmpty(i) == false)
{
if(obj.value == null || obj.value == "")
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不能为空");
obj.focus();
obj.select();
return false;
}
}
//IsEmail
if(this.ruleModel.getIsEmail(i) == true)
{
if(obj.value !="" && IsEmail(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsNumber
if(this.ruleModel.getIsNumber(i) == true)
{
if(obj.value !="" && IsNumber(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsDate
if(this.ruleModel.getIsDate(i) == true)
{
if(obj.value !="" && IsDate(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsDateTime
if(this.ruleModel.getIsDateTime(i) == true)
{
if(obj.value !="" && IsDateTime(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsTime
if(this.ruleModel.getIsTime(i) == true)
{
if(obj.value !="" && IsTime(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsTel
if(this.ruleModel.getIsTel(i) == true)
{
if(obj.value !="" && IsTel(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//IsIp
if(this.ruleModel.getIsIp(i) == true)
{
if(obj.value !="" && IsIp(obj.value) == false)
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"不合法");
obj.focus();
obj.select();
return false;
}
}
//MaxLength
if(this.ruleModel.getMaxLength(i) > 0)
{
if(obj.value !="" && obj.value.length > this.ruleModel.getMaxLength(i))
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"超出最大长度"+
this.ruleModel.getMaxLength(i) +"个字符");
obj.focus();
obj.select();
return false;
}
}
//MinLength
if(this.ruleModel.getMinLength(i) > 0)
{
if(obj.value !="" && obj.value.length < this.ruleModel.getMinLength(i))
{
if(typeof(this.ruleModel.getErrorMsg(i)) != "undefined")
alert("错误提示\r\n"+this.ruleModel.getErrorMsg(i));
else
alert("错误提示\r\n"+this.ruleModel.getName(i)+"最小长度不能少于"+
this.ruleModel.getMinLength(i) +"个字符");
obj.focus();
obj.select();
return false;
}
}
//可继续扩展
//TODO
}
}
return true;
}
/*---若干私有方法
-------------------*/
//是否为电子邮件
function IsEmail(s)
{
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(s))
return true;
else
return false;
}
//是否为IP
function IsIp(s)
{
var
reg=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if(reg.test(s))
return true;
else
return false;
}
//验证电话号码，只允许数字和“-”
function IsTel(s)
{
var reg = /[\d|-]{7,15}/;
if(reg.test(s))
return true;
else
return false;
}
//验证身份证号码
function IsIdno(s){
if (s==""){ return confirm("没有填写身份证号，这样将无法判定其生日！\n确定继续吗？");}
if (s.length != 15 & s.length != 18){
alert("请填入正确的身份证号码");
return false;
}
if (IsNumber(s.substring(0,17))){
alert("请填入正确的身份证号码");
return false;
}
if (IsNumber(s.substring(17,18)) & s.substring(17,18) != "x" & s.substring(17,18) != "X"){
alert("请填入正确的身份证号码");
return false;
}
return true;
}
//含有非数字字符 返回 true
function IsNumber(s){ //适于校验非负整数
var reg = /^[01233456789]{1,}$/;
if(reg.test(s))
return true;
else
return false;
}
//判断日期是否合法
function IsDate(s)
{
//对日期格式进行验证 要求为2000-2099年 格式为 yyyy-mm-dd 并且可以正常转换成正确的日期
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
if(reg.test(s))
return true;
else
return false;
}
function IsDateTime(s)
{
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
if(reg.test(s))
return true;
else
return false;
}
function IsTime(s)
{
var a = s.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
if (a == null) {return false;}
if (a[1]>24 || a[3]>60 || a[4]>60)
{
return false
}
return true;
}
}
//RuleModel - 校验规则
Yesun.RuleModel = function(config)
{
this.config = config;
this.length = config.length;
this.lookup={};
for(var i=0;i<this.length;i++){
if(typeof this.config[i].id=="undefined"){this.config[i].id=i;}
this.lookup[this.config[i].id]=this.config[i];
}
this.getId = function(col){return this.config[col].id;},
this.getName = function(col){return this.config[col].name;},
this.getIsEmpty = function(col){return this.config[col].isEmpty;}
this.getIsEmail = function(col){return this.config[col].isEmail;}
this.getIsNumber = function(col){return this.config[col].isNumber;}
this.getIsTel = function(col){return this.config[col].isTel;}
this.getIsIp = function(col){return this.config[col].isIp;}
this.getIsDate = function(col){return this.config[col].isDate;}
this.getIsTime = function(col){return this.config[col].isTime;}
this.getIsDateTime = function(col){return this.config[col].isDateTime;}
this.getMaxLength = function(col){return this.config[col].maxLength;}
this.getMinLength = function(col){return this.config[col].minLength;}
this.getErrorMsg = function(col){return this.config[col].errorMsg;}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 今天遇到一个问题,原来在html的form中如果只有一个type="text"的控件,如果在text中点击回车键,就是自动提交表单!
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架（三）—数据控件 设计模式之简单工厂模式（C#语言描述）
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
- 优化表单数据的JS校验
- 一个为扩展过的自定义DataGridiew控件提供多行表头重绘所需的TreeNode和Columns代码，以满足列自动增加的功能。大家看看帮忙优化下
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- JavaEE day03 使用JS完成简单的数据校验、完成图片轮播效果、完成页面定时弹出广告、完成表单校验
- 一个简单js表单检测代码（数据完整的省市二级级联）
- js中常用表单数据校验方法
- 一个轻客户端，多语言支持，去中心化，自动负载，可扩展的实时数据写服务的实现方案讨论
- JS获取一个表单字段中多条数据并转化为json格式
- 流程表单中js如何清空SheetUser控件数据？
- 如何查看一个数据文件是否是自动扩展
- form表单数据的自动采集的js方法
- iOS 中使用JS提取网页数据，自动提交表单等
- 如何查看一个数据文件是否是自动扩展
- 优化表单数据的JS校验
- Buffalo自动绑定表单Select数据的一个例子
- Js校验表单数据后提交表单的3种方法
- 一个简易的表单校验插件wv.js