表单的客户端验证

Author: 梁海利 Date: 2001年 44期

?牐犜谟没?填写完表单，并确定向服务器发送之前，我们一般采用客户端浏览器验证填写规范，以减少服务器端脚本执行时间和次数。对于比较简单的表单验证，我们可以用Dreamweaver轻松实现。选中整个表单，用F8或从Window菜单选中behaviors，激活“behaviors-<form>actions”子窗口。单击“+”按钮，在弹出的菜单中选中“validate form”，会弹出一个标题为“validate form”的对话框。在“Named Fields”中选择要验证的文本框名。选中“Value”后的“Required”可以使其为必填项。在“Accept”组中，可以在“Anything”“Number”“Email Address”“Number from”四个按钮中选一个来设定输入的数据类型。设定完后单击“OK”按钮，在Behaviors子窗口就可以看到多了一行内容:“Events”下是“Onsubmit”、“Actions”下是“Validate Form”。若想修改刚才的设定，可在这一行上单击。若查看HTML源码可以看到类似下面这样的一行内容:
　　?牐?<form name="form1" action="confirm.asp"onSubmit="MM_validateForm（＇textfield＇，＇＇，＇R＇，＇textfield2＇，＇＇，＇NisNum＇）；return document.MM_returnValue" >。
　　?牐牰杂谛枰丛友橹さ谋淼ィ颐腔故侵荒茉贖TML中加入JavaScript来实现了。比如有一个用户修改密码的表单。要求用户输入“用户名”（在user_name框中输入）、“原密码”（在old_password框中输入）、“新密码”（在new_password框中输入）、“新密码确认”（在confirm_password框中输入），要求输入不能包含非法字符“\{}”，不能为空，新密码与确认密码必须一致。
　　?牐犜?<HEAD></HEAD>之间加入如下代码:
　　?牐?<SCRIPT language=javascript>
　　?牐爁unction contain（str，charset）// 字符串包含测试函数
　　?牐爗??
　　?牐爒ar i；??
　　?牐爁or（i=0；i<charset.length；i++）??
　　?牐爄f（str.indexOf（charset.charAt（i））>=0）??
　　?牐爎eturn true；
　　?牐爎eturn false；??
　　?牐爙
　　?牐爁unction check_input（） //输入测试函数
　　?牐爗??
　　?牐爓ith （document.form1）{?? ??
　　?牐爄f （（user_name.value==null）||（user_name.value.length==0））
　　?牐爗??
　　?牐燼lert（"请输入用户名！"）；
　　?牐爑ser_name.focus（）；
　　?牐爎eturn false；
　　?牐爙??
　　?牐爄f（contain?焨ser_name.value， "\\{} "））?牐?
　　?牐爗
　　?牐燼lert（"用户名中含有非法字符\\{}或空格！"!"）；
　　?牐爑ser_name.focus（）；?煟牔?
　　?牐爎eturn false；??
　　?牐爙
　　?牐爄f（（old_password.value==null）||（old_password.value.length==0））
　　?牐爗
　　?牐燼lert（"原密码不能为空！"）；??
　　?牐爋ld_password.focus（）；?牔?
　　?牐爎eturn false；
　　?牐爙??
　　?牐爄f（contain（old_password.value，"\\{} "））?牐?
　　?牐爗
　　?牐燼lert（"原密码中含有非法字符\\{}或空格！"）；?牔?
　　?牐爋ld_password.focus（）；
　　?牐爎eturn false；
　　?牐爙
　　?牐爄f（（new_password.value==null）||（new_password.value.length==0））?牐?
　　?牐爗
　　?牐燼lert（"新密码不能为空！"）；
　　?牐爊ew_password.focus（）；
　　?牐爎eturn false；
　　?牐爙
　　?牐爄f（contain（new_password.value，"\\{} "））?牐?
　　?牐爗
　　?牐燼lert（"新密码中含有非法字符\\{}或空格！"）；??
　　?牐爊ew_password.focus（）；
　　?牐爎eturn false；
　　?牐爙
　　?牐爄f（contain（confirm_password.value，"\\{} "））?牐?
　　?牐爗
　　?牐燼lert（"确认密码中含有非法字符\\{}或空格！"）；?牔?
　　?牐燾onfirm_password.focus（）；?牔?
　　?牐爎eturn false；
　　?牐爙
　　?牐爄f（new_password.value！=confirm_password.value）??
　　?牐爗
　　?牐燼lert（"新密码与确认密码不一致！"）；
　　?牐燾onfirm_password.focus（）；?煟牔?
　　?牐爎eturn false；
　　?牐爙
　　?牐爙??
　　?牐爎eturn true；
　　?牐爙
　　?牐?</SCRIPT>
　　?牐犛肈reamweaver做好表单，并将定义表单的第一句改为:
　　?牐?<FORM action=chgpwd.asp method=post name=form1
　　?牐爋nsubmit="return check_input（）">
　　
　　