页面验证
例子：仅供测试
//这是把JS文件全放在了html里面 可以把里面的JS内容分出2个JS来 另外 身份证的验证 在另一文章里面
//http://www.cnblogs.com/jiandanfy/archive/2008/02/01/1061248.html
<html>
<head>
<title>简单星空 页面验证的例子</title>
</head>
<script>
function onBtnSave() {
form = document.forms[0];
if(validateForm(form)) {
alert("验证通过！");
return;
// var url = "<c:url value='/emclass/saveAdd.do' />";
//form.action = url;
// form.submit();
}
}
/////////////////////////////////////////////////////////////////////以下是 validate.js
function validateForm(form) {
return validateRequired(form);
}
function required () {
//添加或者一个新的验证类型 要在下面添加 一个新的验证类型 然后去validates.js里指定的位置增加相应的验证代码
//数组第一位是验证类型 第二位是表单元素的name 第三位是验证不通过时弹出来的警告信息 最后一个 扩展
//最小长度
this.r1 = new Array("minlength","passwd", "密码不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
this.r2 = new Array("minlength","boke", "博客园帐号不能为空 ", new Function ("varName","this.minlength=1;return this[varName];"));
this.r3 = new Array("minlength","pking","身份证号码不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
this.r4 = new Array("minlength","bank","银行存款不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
//最大长度
this.r5 = new Array("maxlength","passwd", "密码不能超过10位 ", new Function ("varName","this.maxlength=10;return this[varName];"));
//负数
this.r6 = new Array("negative","bank", "银行存款就不要填负数了 不能为负数");
//整数
this.r7 = new Array("int","company", "请务必正确填写你所拥有的世界500强企业的数目 此数目允许为负 ");
//实数
this.r8 = new Array("float","bank", "银行存款小数点后可以填2位 注意： 不允许超过一万 ！", new Function ("varName","this.max=5;this.min=2;return this[varName];"));
//身份证号码
this.r9 = new Array("pking","pking", "请填写正确的身份证号码！");
//两次密码确认
this.r10 = new Array("passwd","passwd", "2次输入的密码不一样","passwds");
//日期先后顺序 数组的第二位是第一次时间 第4位是第二次时间
this.r11 = new Array("dateOrder","birthday", "日期顺序不对","birthdays");
//日期格式验证
this.r12 = new Array("date","birthday", "日期格式填写错误", new Function ("varName","this.datePattern='yyyy-MM-dd';return this[varName];"));
this.r13 = new Array("date","birthdays", "日期格式填写错误", new Function ("varName","this.datePattern='yyyy-MM-dd';return this[varName];"));
//帐号格式
this.r14 = new Array("chn","boke", "帐号必须是中文");
this.r15 = new Array("id","boke", "注册帐号格式应该是：字母开头，允许5-16字节，允许字母数字下划线");
this.r16 = new Array("email","boke", "email格式填写错误");
}
////////////////////////////////////////////////////////////////////////// 以下是 validates.js
//去掉左右空格
function trim(s) {
return s.replace( /^"s*/, "" ).replace( /"s*$/, "" );
}
//字串长度
function strLen(value){
var str,Num = 0;
for (var i=0;i<value.length;i++){
str = value.substring(i,i+1);
if (str<="~")
Num+=1;
else
Num+=2;
}
return Num;
}
//判断argvalue 字串中的每一个字符 是否在规定范围之内
function isAllDigits(argvalue) {
argvalue = argvalue.toString();
var validChars = "0123456789";
var startFrom = 0;
if (argvalue.substring(0, 2) == "0x") {
validChars = "0123456789abcdefABCDEF";
startFrom = 2;
} else if (argvalue.charAt(0) == "0") {
validChars = "01234567";
startFrom = 1;
} else if (argvalue.charAt(0) == "-") {
startFrom = 1;
}
for (var n = startFrom; n < argvalue.length; n++) {
if (validChars.indexOf(argvalue.substring(n, n+1)) == -1) return false;
}
return true;
}
// 通用取值函数 分三类进行取值 [文本输入框,单多选,多下拉菜单]
function getValue(field){
var fType = field.type;
switch(fType) {
case "text":
case "hidden":
case "password":
case "file":
case "textarea": return field.value;
case "checkbox":
case "radio": return GetValueChoose(field);
case "select-one":
case "select-multiple": return GetValueSel(field);
}
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
function GetValueChoose(field) {
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(field.name);
for(var i=0;i<tmpels.length;i++) {
if(tmpels[i].checked) {
sValue += "0";
}
}
return sValue;
}
function GetValueSel(field){
var sValue = "";
for(var i=0;i<field.options.length;i++) {
//单选下拉框提示选项设置为value=""
if(field.options[i].selected && field.options[i].value!=""){
sValue += "0";
}
}
return sValue;
}
}
// 验证函数
function validateRequired(form) {
var isValid = true;
var focusField = null;
var i = 0;
var fields = new Array();
oRequired = new required();
for (x in oRequired) {
var valiType = oRequired[x][0];
var field = form[oRequired[x][1]];
if(typeof field =="#ff0000") continue;
var value = getValue(field);
var a="";
switch(valiType) {
case "minlength": var minlength = parseInt(oRequired[x][3]("minlength")); a=vMinlength(value,minlength);break;
case "maxlength": var maxlength = parseInt(oRequired[x][3]("maxlength")); a=vMaxlength(value,maxlength);break;
case "negative": a=vNegative(value);break;
case "int": a=vInt(value);break;
case "float":a=vFloat(value);break;
case "idcard":a=vIdcard(value);break;
case "passwd": value2 = getValue(form[oRequired[x][3]]); a=vPasswd(value,value2);break;
case "dateOrder": value2 = getValue(form[oRequired[x][3]]); a=vDateOrder(value,value2);break;
case "date": a=vDate(value);break;
case "id": a=vId(value);break;
case "email": a=vEmail(value);break;
case "chn": a=vChn(value);break;
}
//如果验证不通过
if (a) {
if (i == 0) focusField = field;
fields[i++] = oRequired[x][2];
isValid = false;
}
}
if (fields.length > 0) {
focusField.focus();
alert(fields.join('"n'));
}
return isValid;
}
// 最小长度 （不能为空）
function vMinlength(value,minlength){
if(trim(value).length < minlength)return true;
}
// 最大长度
function vMaxlength(value,maxlength){
if(trim(value).length > maxlength)return true;
}
// 不能有负号
function vNegative(value){
if(trim(value).indexOf("-")!=-1)return true;
}
// 整数
function vInt(value) {
if (value.length > 0) {
if (!isAllDigits(value))
return true;
else {
var iValue = parseInt(value);
if (isNaN(iValue) || !(iValue >= -2147483648 && iValue <= 2147483647))
return true;
}
}
}
// 浮点数
function vFloat(value) {
if (value.length > 0) {
// remove '.' before checking digits
var tempArray = value.split('.');
//Strip off leading '0'
var zeroIndex = 0;
var joinedString= tempArray.join('');
while (joinedString.charAt(zeroIndex) == '0') {
zeroIndex++;
}
var noZeroString = joinedString.substring(zeroIndex,joinedString.length);
if (!isAllDigits(noZeroString))
return true;
else {
var iValue = parseFloat(value);
if (isNaN(iValue))
return true;
var fMin = parseFloat(oRequired[x][3]("min"));
var fMax = parseFloat(oRequired[x][3]("max"));
var intValue = '';
var fragValue = '';
var index = value.indexOf(".");
if(index==-1){
intValue = value;
}else{
intValue = value.substring(0,index);
fragValue = value.substring(index+1);
}
if( vInt(intValue) || vInt(fragValue) )
return true;
if (!(intValue.length <= fMax && fragValue.length <= fMin))
return true;
}
}
}
// 密码确认
function vPasswd(value,value2){
if(value!=value2)return true;
}
// 时间顺序
function vDateOrder(date1,date2){
var _date1 = date1.split("-");
var d1=new Date(_date1[0],_date1[1],_date1[2]);
var _date2 = date2.split("-");
var d2=new Date(_date2[0],_date2[1],_date2[2]);
if( d1.getTime()>=d2.getTime() )
return true;
}
// 日期验证
function vDate(value) {
if(trim(value).length!=0){
var date = value.split("-");
var yyyy = date[0], mm = date[1], dd = date[2];
var d=new Date(yyyy,mm,dd),year=d.getFullYear(),mon=d.getMonth(),day=d.getDate();
if ( year!=yyyy || mon!=mm || day!=dd ||!isValidDate(dd, mm, yyyy) )
return true;
}
}
//日期 初步验证
function isValidDate(day, month, year) {
if (month < 1 || month > 12) {
return false;
}
if (day < 1 || day > 31) {
return false;
}
if ((month == 4 || month == 6 || month == 9 || month == 11) &&
(day == 31)) {
return false;
}
if (month == 2) {
var leap = (year % 4 == 0 &&
(year % 100 != 0 || year % 400 == 0));
if (day>29 || (day == 29 && !leap)) {
return false;
}
}
return true;
}
//注册帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
function vId(value){
if( !(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value)))
return true;
}
//验证必需是中文
function vChn(value){
if( (/^[u4E00-u9FA5]+$/.test(value)))
return true;
}
//检查email邮箱
function vEmail(value){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((".[a-zA-Z0-9_-]{2,3}){1,2})$/;
if( !reg.test(value))return true;
}
</script>
<body background="119.jpg">
<form><br><br><br>
<table align="center">
<tr><td>
博客园帐号</td><td>
<input type="text" name="boke"></td></tr><tr><td> <br>
密码</td><td>
<input type="passwd" name="passwd"></td></tr><tr><td> <br>
重新输入密码 </td><td>
<input type="passwd" name="passwds"></td></tr><tr><td> <br>
身份证号码 </td><td>
<input type="text" name="pking"></td></tr><tr><td> <br>
银行存款 </td><td>
<input type="text" name="bank"></td></tr><tr><td> <br>
拥有几家世界500强企业 </td><td>
<input type="text" name="company"></td></tr><tr><td> <br>
出生日期 </td><td>
<input type="text" name="birthday"></td></tr><tr><td> <br>
下辈子出生日期 </td><td>
<input type="text" name="birthdays"></td></tr><br>
</table><br>
<table align="center">
<tr>
<td>
<button style="width:60px" onClick="onBtnSave()">保存</button>
</td>
</tr>
</table>
</form>
</body>
</html>
| 注册帐号 | |
密码 |
|
重新输入密码 |
|
身份证号码 |
|
银行存款 |
|
拥有几家世界500强企业 |
|
出生日期 |
|
下辈子出生日期 |
| 对输入内容进行验证 |
//http://www.cnblogs.com/jiandanfy/archive/2008/02/01/1061248.html
<html>
<head>
<title>简单星空 页面验证的例子</title>
</head>
<script>
function onBtnSave() {
form = document.forms[0];
if(validateForm(form)) {
alert("验证通过！");
return;
// var url = "<c:url value='/emclass/saveAdd.do' />";
//form.action = url;
// form.submit();
}
}
/////////////////////////////////////////////////////////////////////以下是 validate.js
function validateForm(form) {
return validateRequired(form);
}
function required () {
//添加或者一个新的验证类型 要在下面添加 一个新的验证类型 然后去validates.js里指定的位置增加相应的验证代码
//数组第一位是验证类型 第二位是表单元素的name 第三位是验证不通过时弹出来的警告信息 最后一个 扩展
//最小长度
this.r1 = new Array("minlength","passwd", "密码不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
this.r2 = new Array("minlength","boke", "博客园帐号不能为空 ", new Function ("varName","this.minlength=1;return this[varName];"));
this.r3 = new Array("minlength","pking","身份证号码不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
this.r4 = new Array("minlength","bank","银行存款不能为空", new Function ("varName","this.minlength=1;return this[varName];"));
//最大长度
this.r5 = new Array("maxlength","passwd", "密码不能超过10位 ", new Function ("varName","this.maxlength=10;return this[varName];"));
//负数
this.r6 = new Array("negative","bank", "银行存款就不要填负数了 不能为负数");
//整数
this.r7 = new Array("int","company", "请务必正确填写你所拥有的世界500强企业的数目 此数目允许为负 ");
//实数
this.r8 = new Array("float","bank", "银行存款小数点后可以填2位 注意： 不允许超过一万 ！", new Function ("varName","this.max=5;this.min=2;return this[varName];"));
//身份证号码
this.r9 = new Array("pking","pking", "请填写正确的身份证号码！");
//两次密码确认
this.r10 = new Array("passwd","passwd", "2次输入的密码不一样","passwds");
//日期先后顺序 数组的第二位是第一次时间 第4位是第二次时间
this.r11 = new Array("dateOrder","birthday", "日期顺序不对","birthdays");
//日期格式验证
this.r12 = new Array("date","birthday", "日期格式填写错误", new Function ("varName","this.datePattern='yyyy-MM-dd';return this[varName];"));
this.r13 = new Array("date","birthdays", "日期格式填写错误", new Function ("varName","this.datePattern='yyyy-MM-dd';return this[varName];"));
//帐号格式
this.r14 = new Array("chn","boke", "帐号必须是中文");
this.r15 = new Array("id","boke", "注册帐号格式应该是：字母开头，允许5-16字节，允许字母数字下划线");
this.r16 = new Array("email","boke", "email格式填写错误");
}
////////////////////////////////////////////////////////////////////////// 以下是 validates.js
//去掉左右空格
function trim(s) {
return s.replace( /^"s*/, "" ).replace( /"s*$/, "" );
}
//字串长度
function strLen(value){
var str,Num = 0;
for (var i=0;i<value.length;i++){
str = value.substring(i,i+1);
if (str<="~")
Num+=1;
else
Num+=2;
}
return Num;
}
//判断argvalue 字串中的每一个字符 是否在规定范围之内
function isAllDigits(argvalue) {
argvalue = argvalue.toString();
var validChars = "0123456789";
var startFrom = 0;
if (argvalue.substring(0, 2) == "0x") {
validChars = "0123456789abcdefABCDEF";
startFrom = 2;
} else if (argvalue.charAt(0) == "0") {
validChars = "01234567";
startFrom = 1;
} else if (argvalue.charAt(0) == "-") {
startFrom = 1;
}
for (var n = startFrom; n < argvalue.length; n++) {
if (validChars.indexOf(argvalue.substring(n, n+1)) == -1) return false;
}
return true;
}
// 通用取值函数 分三类进行取值 [文本输入框,单多选,多下拉菜单]
function getValue(field){
var fType = field.type;
switch(fType) {
case "text":
case "hidden":
case "password":
case "file":
case "textarea": return field.value;
case "checkbox":
case "radio": return GetValueChoose(field);
case "select-one":
case "select-multiple": return GetValueSel(field);
}
//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
function GetValueChoose(field) {
var sValue = "";
//取得第一个元素的name,搜索这个元素组
var tmpels = document.getElementsByName(field.name);
for(var i=0;i<tmpels.length;i++) {
if(tmpels[i].checked) {
sValue += "0";
}
}
return sValue;
}
function GetValueSel(field){
var sValue = "";
for(var i=0;i<field.options.length;i++) {
//单选下拉框提示选项设置为value=""
if(field.options[i].selected && field.options[i].value!=""){
sValue += "0";
}
}
return sValue;
}
}
// 验证函数
function validateRequired(form) {
var isValid = true;
var focusField = null;
var i = 0;
var fields = new Array();
oRequired = new required();
for (x in oRequired) {
var valiType = oRequired[x][0];
var field = form[oRequired[x][1]];
if(typeof field =="#ff0000") continue;
var value = getValue(field);
var a="";
switch(valiType) {
case "minlength": var minlength = parseInt(oRequired[x][3]("minlength")); a=vMinlength(value,minlength);break;
case "maxlength": var maxlength = parseInt(oRequired[x][3]("maxlength")); a=vMaxlength(value,maxlength);break;
case "negative": a=vNegative(value);break;
case "int": a=vInt(value);break;
case "float":a=vFloat(value);break;
case "idcard":a=vIdcard(value);break;
case "passwd": value2 = getValue(form[oRequired[x][3]]); a=vPasswd(value,value2);break;
case "dateOrder": value2 = getValue(form[oRequired[x][3]]); a=vDateOrder(value,value2);break;
case "date": a=vDate(value);break;
case "id": a=vId(value);break;
case "email": a=vEmail(value);break;
case "chn": a=vChn(value);break;
}
//如果验证不通过
if (a) {
if (i == 0) focusField = field;
fields[i++] = oRequired[x][2];
isValid = false;
}
}
if (fields.length > 0) {
focusField.focus();
alert(fields.join('"n'));
}
return isValid;
}
// 最小长度 （不能为空）
function vMinlength(value,minlength){
if(trim(value).length < minlength)return true;
}
// 最大长度
function vMaxlength(value,maxlength){
if(trim(value).length > maxlength)return true;
}
// 不能有负号
function vNegative(value){
if(trim(value).indexOf("-")!=-1)return true;
}
// 整数
function vInt(value) {
if (value.length > 0) {
if (!isAllDigits(value))
return true;
else {
var iValue = parseInt(value);
if (isNaN(iValue) || !(iValue >= -2147483648 && iValue <= 2147483647))
return true;
}
}
}
// 浮点数
function vFloat(value) {
if (value.length > 0) {
// remove '.' before checking digits
var tempArray = value.split('.');
//Strip off leading '0'
var zeroIndex = 0;
var joinedString= tempArray.join('');
while (joinedString.charAt(zeroIndex) == '0') {
zeroIndex++;
}
var noZeroString = joinedString.substring(zeroIndex,joinedString.length);
if (!isAllDigits(noZeroString))
return true;
else {
var iValue = parseFloat(value);
if (isNaN(iValue))
return true;
var fMin = parseFloat(oRequired[x][3]("min"));
var fMax = parseFloat(oRequired[x][3]("max"));
var intValue = '';
var fragValue = '';
var index = value.indexOf(".");
if(index==-1){
intValue = value;
}else{
intValue = value.substring(0,index);
fragValue = value.substring(index+1);
}
if( vInt(intValue) || vInt(fragValue) )
return true;
if (!(intValue.length <= fMax && fragValue.length <= fMin))
return true;
}
}
}
// 密码确认
function vPasswd(value,value2){
if(value!=value2)return true;
}
// 时间顺序
function vDateOrder(date1,date2){
var _date1 = date1.split("-");
var d1=new Date(_date1[0],_date1[1],_date1[2]);
var _date2 = date2.split("-");
var d2=new Date(_date2[0],_date2[1],_date2[2]);
if( d1.getTime()>=d2.getTime() )
return true;
}
// 日期验证
function vDate(value) {
if(trim(value).length!=0){
var date = value.split("-");
var yyyy = date[0], mm = date[1], dd = date[2];
var d=new Date(yyyy,mm,dd),year=d.getFullYear(),mon=d.getMonth(),day=d.getDate();
if ( year!=yyyy || mon!=mm || day!=dd ||!isValidDate(dd, mm, yyyy) )
return true;
}
}
//日期 初步验证
function isValidDate(day, month, year) {
if (month < 1 || month > 12) {
return false;
}
if (day < 1 || day > 31) {
return false;
}
if ((month == 4 || month == 6 || month == 9 || month == 11) &&
(day == 31)) {
return false;
}
if (month == 2) {
var leap = (year % 4 == 0 &&
(year % 100 != 0 || year % 400 == 0));
if (day>29 || (day == 29 && !leap)) {
return false;
}
}
return true;
}
//注册帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
function vId(value){
if( !(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value)))
return true;
}
//验证必需是中文
function vChn(value){
if( (/^[u4E00-u9FA5]+$/.test(value)))
return true;
}
//检查email邮箱
function vEmail(value){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((".[a-zA-Z0-9_-]{2,3}){1,2})$/;
if( !reg.test(value))return true;
}
</script>
<body background="119.jpg">
<form><br><br><br>
<table align="center">
<tr><td>
博客园帐号</td><td>
<input type="text" name="boke"></td></tr><tr><td> <br>
密码</td><td>
<input type="passwd" name="passwd"></td></tr><tr><td> <br>
重新输入密码 </td><td>
<input type="passwd" name="passwds"></td></tr><tr><td> <br>
身份证号码 </td><td>
<input type="text" name="pking"></td></tr><tr><td> <br>
银行存款 </td><td>
<input type="text" name="bank"></td></tr><tr><td> <br>
拥有几家世界500强企业 </td><td>
<input type="text" name="company"></td></tr><tr><td> <br>
出生日期 </td><td>
<input type="text" name="birthday"></td></tr><tr><td> <br>
下辈子出生日期 </td><td>
<input type="text" name="birthdays"></td></tr><br>
</table><br>
<table align="center">
<tr>
<td>
<button style="width:60px" onClick="onBtnSave()">保存</button>
</td>
</tr>
</table>
</form>
</body>
</html>