主题:  用ASP动态生成JavaScript的表单验证代码

5D荣誉斑竹

职务:普通成员
等级:2
金币:10.0
发贴:710
注册:2001/10/24 18:34:42
#12002/10/24 13:55:18
前言:

  表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等,这时候就要用到表单验证了,一般我们常用的表单验证有2种方式:

1、编写javascript或VBScript的表单验证函数,在客户端进行验证;
2、在表单提交后,使用ASP的方法Request.Form获取表单的输入值进行判断,然后返回结果,这是在服务端进行验证;

  这2种方式都有其优缺点,比如第1种方式速度比较快,而且通常使用警告框的方式,用户能够很快的根据提示完成表单的填写,但是缺点就是用户的浏览器必须是支持javascript脚本的,再不然如果他关闭了javascript,那就!@#$%&^*(小田已经倒在地上了^_^);而第2种方式的兼容性比较好,但是缺点是速度比较慢(提交到服务端,在返回)而且使用也不方便。这次主要是用javascript的方法来验证,当然,如果同时用2种方式来验证是最保险了,不过(汗…………)要累死我们这些程序员了:)

  上面解释了表单验证的2中方式,下面就具体来讲讲动态生成javascript的概念。为什么要动态生成呢?因为这种客户端的验证代码是很烦琐的,如果每次都要自己编写真是累啊!用惯DW(Dreamweaver)或UD的朋友可能通常使用表单验证的插件,使用后生成的代码也没有艺术感,而且很多是用不到的(代码冗余)。小田要讲的是,生成完全符合表单情况的代码。

声明:小田对javascript并不精通,这里只是想谈谈动态生成的方法,JS的高手完全可以自己改。

教程浏览:http://www.10fber.com/mylesson/asp2js/lesson.htm
函数下载:http://www.10fber.com/mylesson/asp2js/checkform_js.zip



忧忧

职务:普通成员
等级:1
金币:1.0
发贴:180
注册:2002/7/23 1:32:17
#22002/10/28 21:26:53
测试~~~
我没有通过
错误类型:
Microsoft VBScript 编译器错误 (0x800A0408)
无效字符
/lianxi/shop/TMP8hips4p0yx.asp, line 8
   "PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,"&_

<%
Dim errStr
errStr="name|0|姓名必须填写,"&_
   "PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,"&_
   "PassWD|7|您两次输入的密码不相同,请重新输入!,"&_
"WtPass|0|请填写密码提示问题,"&_
     "DaPass|0|请填写密码遗忘时将验证此答案,"&_
     "email|5|email的格式不正确,"&_
     "idNumbers|2|姓名必须填写,idNumbers|4|身份证号码不能少于15位数|15"&_
     "Phone|0|电话号码必须填写,"&_
     "Address|0|收货地址必须填写,"&_
     "Zip|0|邮编必须填写" 
Call checkform_js("frm",errStr)
%>
<%
Call checkform_js("name|0|姓名必须填写,PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,PassWD|7|您两次输入的密码不相同,请重新输入!,WtPass|0|请填写密码提示问题,DaPass|0|请填写密码遗忘时将验证此答案,email|5|email的格式不正确,idNumbers|2|姓名必须填写,idNumbers|4|身份证号码不能少于15位数|15,Phone|0|电话号码必须填写,Address|0|收货地址必须填写,Zip|0|邮编必须填写")
%>
都不能使用
帮我看看~~~~



5D荣誉斑竹

职务:普通成员
等级:2
金币:10.0
发贴:710
注册:2001/10/24 18:34:42
#32002/10/28 23:21:42
忧忧在上个帖子中说
引用:
测试~~~
我没有通过
错误类型:
Microsoft VBScript 编译器错误 (0x800A0408)
无效字符
/lianxi/shop/TMP8hips4p0yx.asp, line 8
   "PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,"&_

<%
Dim errStr
errStr="name|0|姓名必须填写,"&_
   "PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,"&_
   "PassWD|7|您两次输入的密码不相同,请重新输入!,"&_
"WtPass|0|请填写密码提示问题,"&_
     "DaPass|0|请填写密码遗忘时将验证此答案,"&_
     "email|5|email的格式不正确,"&_
     "idNumbers|2|姓名必须填写,idNumbers|4|身份证号码不能少于15位数|15"&_
     "Phone|0|电话号码必须填写,"&_
     "Address|0|收货地址必须填写,"&_
     "Zip|0|邮编必须填写" 
Call checkform_js("frm",errStr)
%>
<%
Call checkform_js("name|0|姓名必须填写,PassWD|0|密码必须填写,PassWD|4|不能少于4位数|4,PassWD|7|您两次输入的密码不相同,请重新输入!,WtPass|0|请填写密码提示问题,DaPass|0|请填写密码遗忘时将验证此答案,email|5|email的格式不正确,idNumbers|2|姓名必须填写,idNumbers|4|身份证号码不能少于15位数|15,Phone|0|电话号码必须填写,Address|0|收货地址必须填写,Zip|0|邮编必须填写")
%>
都不能使用
帮我看看~~~~




看这句:“"PassWD|7|您两次输入的密码不相同,请重新输入!,"&_”
这个第7项是要有4个参数的,后面要跟要要比较的那个密码框名称的,比如:

"PassWD|7|您两次输入的密码不相同,请重新输入!|ReplyPassWD,"&_



忧忧

职务:普通成员
等级:1
金币:1.0
发贴:180
注册:2002/7/23 1:32:17
#42002/10/29 20:13:13
通过电子邮箱检测,没有作用!
else if ((!emailReg.test(document.form1.email.value))&&(document.form1.email.value!=''))
{
window.alert ('email的格式不正确');
document.form1.email.select();
document.form1.email.focus();
return false;
}



5D荣誉斑竹

职务:普通成员
等级:2
金币:10.0
发贴:710
注册:2001/10/24 18:34:42
#52002/10/29 21:18:00
忧忧在上个帖子中说
引用:
通过电子邮箱检测,没有作用!
else if ((!emailReg.test(document.form1.email.value))&&(document.form1.email.value!=''))
{
window.alert ('email的格式不正确');
document.form1.email.select();
document.form1.email.focus();
return false;
}



怎么个没有作用?是填写的不符合email格式的内容但没有检测到,还是没有填任何内容就检测不到?
如果是第二个的话,是因为我去掉的必填的限制,如果要限制它必须填写,就得和“0”搭配,如果是第一个的话,请把全部代码帖出来,还有告知你IE的版本



忧忧

职务:普通成员
等级:1
金币:1.0
发贴:180
注册:2002/7/23 1:32:17
#62002/10/29 21:42:16
多谢!指正,还发现了一个问题不知道问什么不能判断
else if (document.form1.PassWD.value.length>4)
{
window.alert ('密码不能少于4位数');
document.form1.PassWD.select();
document.form1.PassWD.focus();
return false;
}
我看这个代码是对的怎么跳过了没有执行!
还想问一个问题
如果我想修改代码
如加 function isNumber(s) //数字判断函数
我该怎样进行编写
function isNumber(s) //数字判断函数
{
var digits = "0123456789";
var i = 0;
var sLength = s.length;

while ((i < sLength))
{
var c = s.charAt(i);
if (digits.indexOf(c) == -1) return false;
i++;
}

return true;
}



忧忧

职务:普通成员
等级:1
金币:1.0
发贴:180
注册:2002/7/23 1:32:17
#72002/10/29 21:49:04
不错的客户端表单脚本验证(供大家参考学习)
function Jtrim(str) //去空隔函数
{

var i = 0;
var len = str.length;
if ( str == "" ) return( str );
j = len -1;
flagbegin = true;
flagend = true;
while ( flagbegin == true && i< len)
{
if ( str.charAt(i) == " " )
{
i=i+1;
flagbegin=true;
}
else
{
flagbegin=false;
}
}

while (flagend== true && j>=0)
{
if (str.charAt(j)==" ")
{
j=j-1;
flagend=true;
}
else
{
flagend=false;
}
}

if ( i > j ) return ("")

trimstr = str.substring(i,j+1);
return trimstr;
}

function isNumber(s) //数字判断函数
{
var digits = "0123456789";
var i = 0;
var sLength = s.length;

while ((i < sLength))
{
var c = s.charAt(i);
if (digits.indexOf(c) == -1) return false;
i++;
}

return true;
}
function isemail (s)//验证E-MAIL格式函数
{

if (s.length > 100)
{
window.alert("email地址长度不能超过100位!");
return false;
}

var regu = "^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$"
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
window.alert ("请输入有效合法的E-mail地址 !")
return false;
}
}
//判断是否中文函数
function ischinese(s){
var ret=true;
for(var i=0;i ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
//--------------------------------------------------------------------------------
function ismit()//判断radio是否没有选择函数
{
var count=0;
for (ii=0;ii {
if (myform.elements[ii].type=="radio" && myform.elements[ii].checked==true)
{
count++;
}
}

if (Jtrim(document.myform.user_name.value)=='') {
window.alert ("请输入您的队员名 !")
myform.user_name.focus();
return false;
}
if(ischinese(document.myform.user_name.value)){
window.alert("请输入英文队员名")
myform.user_name.focus();
return false;
}

}
if (Jtrim(myform.user_pass1.value)=="" || myform.user_pass1.value.length < 4)
{
alert("您的密码不能为空且不能少于4位数!");
myform.user_pass1.focus();
myform.user_pass1.select();
return false;
}
if (Jtrim(myform.user_pass2.value)=="" || myform.user_pass2.value.length < 4)
{
alert("您的确认密码不能为空且不能少于4位数!");
myform.user_pass2.focus();
myform.user_pass2.select();
return false;
}
if (myform.user_pass1.value!=myform.user_pass2.value)
{
alert("您两次输入的密码不相同,请重新输入!");
myform.user_pass1.value="";
myform.user_pass2.value="";
myform.user_pass2.focus();
return false;
}

if (!isNumber(document.myform.user_qq.value))
{
window.alert ("QQ号码应该是数字,请重新输入!");
myform.user_qq.focus();
myform.user_qq.value='';
return false;
}
if (Jtrim(document.myform.user_email.value)==''){
window.alert("请填写您经常使用的一个邮箱!");
myform.user_email.focus();
return false;
}
if (!isemail(document.myform.user_email.value))
{
myform.user_email.focus();
return false;
}
if (myform.user_question.value==0)
{
alert("请选择一个密码提示问题");
myform.user_question.focus();
return false;
}

return true;
}



5D荣誉斑竹

职务:普通成员
等级:2
金币:10.0
发贴:710
注册:2001/10/24 18:34:42
#82002/10/29 23:45:46
忧忧在上个帖子中说
引用:
多谢!指正,还发现了一个问题不知道问什么不能判断
else if (document.form1.PassWD.value.length>4)
{
window.alert ('密码不能少于4位数');
document.form1.PassWD.select();
document.form1.PassWD.focus();
return false;
}
我看这个代码是对的怎么跳过了没有执行!
还想问一个问题
如果我想修改代码
如加 function isNumber(s) //数字判断函数
我该怎样进行编写
function isNumber(s) //数字判断函数
{
var digits = "0123456789";
var i = 0;
var sLength = s.length;

while ((i < sLength))
{
var c = s.charAt(i);
if (digits.indexOf(c) == -1) return false;
i++;
}

return true;
}


你的这个问题和上面提的那个一样啊?我还是那句:“是填写的不符合格式的内容但没有检测到,还是没有填任何内容就检测不到?”

而且,如果帖源码的话,最好把整个JS的代码都帖出来,这是一个函数啊,你给一部分,我怎么能看出来有没有问题呢?

第二个问题,我想是不能的。你必须按照我写的那种类型来改,而且你这里写的函数,用一个正则表达式就可以解决了(而且我里面已经提供是否是数字的判断了啊!!)



忧忧

职务:普通成员
等级:1
金币:1.0
发贴:180
注册:2002/7/23 1:32:17
#92002/10/30 12:20:53
1 上面那段就是整个源代码

2代码复制到word 在另保存为文本格式!
<%
Call checkform_js("form1","name|0|姓名必须填写,PassWD|0|密码必须填写,PassWD|4|密码不能少于4位数|4,PasswordConfirm|0|确认密码必须填写,PassWD|7|您两次输入的密码不相同,请重新输入!|PasswordConfirm,WtPass|0|请填写密码提示问题,DaPass|0|请填写密码遗忘时将验证此答案,email|0|电子邮箱必须填写,email|5|email的格式不正确,idNumbers|0|身份证号码必须填写,idNumbers|4|身份证号码不能少于15位数|15,Phone|0|电话号码必须填写,Address|0|收货地址必须填写,Zip|0|邮编必须填写")
%>

3 这是我写的,关于生成代码,可以自己看一下!你可以看看为什么不行
PassWD|0|密码必须填写,PassWD|4|密码不能少于4位数|4,PasswordConfirm|0|确认密码必须填写

4 我想自己修改CheckForm_JS.asp,是不是很难操作!(感觉有些部分不太好用!)



5D荣誉斑竹

职务:普通成员
等级:2
金币:10.0
发贴:710
注册:2001/10/24 18:34:42
#102002/10/30 13:56:59
首先要改正一个错误,就是CheckForm_JS.asp的第113行,小田将“<”写成“>”了。忧忧不说还真没发现,谢了!(这就是为什么你这里的PassWD|4|密码不能少于4位数|4 没起作用的原因)

找到这句:
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length>"&tmpArr(i+3)&")"&vbCrlf&_
改为:
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length<"&tmpArr(i+3)&")"&vbCrlf&_

2 根据你写的,我做了个小例子,看,调试过了,没问题的,你再试试:

<%
Call checkform_js("form1","name|0|姓名必须填写,PassWD|0|密码必须填写,PassWD|4|密码不能少于4位数|4,PasswordConfirm|0|确认密码必须填写,PassWD|7|您两次输入的密码不相同,请重新输入!|PasswordConfirm,WtPass|0|请填写密码提示问题,DaPass|0|请填写密码遗忘时将验证此答案,email|0|电子邮箱必须填写,email|5|email的格式不正确,idNumbers|0|身份证号码必须填写,idNumbers|4|身份证号码不能少于15位数|15,Phone|0|电话号码必须填写,Address|0|收货地址必须填写,Zip|0|邮编必须填写")
%>

name:
PassWD:
PasswordConfirm:
WtPass:
DaPass:
email:
idNumbers:
Phone:
Address:
Zip



修改CheckForm_JS.asp也不麻烦,不过你要按照差不多的格式来写,就好象:
if ((document.form1.name.value)=="")
{
window.alert ('姓名必须填写');
document.form1.name.select();
document.form1.name.focus();
return false;
}
绝对不能写独立的函数!仔细看看我写的教程就知道了。

还有,你说的有些部分不好用,能否告知具体哪些部分,小田可以做些修改!谢