Posted on 2007-11-18 00:12
yukui 阅读(780)
评论(0) 编辑 收藏 所属分类:
技术
<script language="JavaScript">
//设置焦点函数
function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
elem.focus( );
elem.select( );
}
// 验证下拉框
function isChosen(select){
if (select.selectedIndex==0) {
alert("请选择下拉单相应栏目.");
focusElement(select.form.name,select.name);
return false;
} else {
return true;
}
}
//不为空函数
function isNotEmpty(elem) {
var str=elem.value;
if(str==null || str.length==0) {
alert("此项不能为空");
focusElement(elem.form.name,elem.name);
return false;
} else {
return true;
}
}
// 验证是否是数字
function isNumber(elem) {
var str=elem.value;
var oneDecimal=false;
var oneChar=0;
str=str.toString( );
for (var i=0; i<str.length; i++) {
oneChar=str.charAt(i).charCodeAt(0);
// -
if (oneChar==45) {
if (i==0) {
continue;
} else {
alert("Only the first character may be a minus sign.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
}
// 小数点
if (oneChar==46) {
if (!oneDecimal) {
oneDecimal=true;
continue;
} else {
alert("输入的数字只允许有一个小数点.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
}
// 数字只能在0和9之间
if (oneChar<48 || oneChar > 57) {
alert("此项只能输入数字.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
}
return true;
}
// 验证是否是数字电话
function istel(elem) {
var str=elem.value;
var oneDecimal=false;
var oneChar=0;
str=str.toString( );
for (var i=0; i<str.length; i++) {
oneChar=str.charAt(i).charCodeAt(0);
if(oneChar==45){continue;}
if(oneChar<48 || oneChar > 57) {
alert("此项只能输入数字和'-'号.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
}
}
return true;
}
//验证输入数据的长度
//邮编
function isLenMatch(elem,lengthNum) {
var str=elem.value;
if (str.length != lengthNum) {
alert("此项内容长度只能为"+lengthNum+"位.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
//邮件地址验证
function isEMailAddr(elem) {
var str = elem.value;
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!str.match(re)) {
alert("您输入的不是有效的e-mail地址.");
setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
return false;
} else {
return true;
}
}
//单选按钮验证
function isValidRadio(radio) {
var valid=false;
for (var i=0; i<radio.length; i++) {
if (radio.checked) {
return true;
}
}
alert("单选按钮未选中.");
radio[0].focus();
//setTimeout("focusElement('" + radio[0].form.name + "', '" + radio[0].name + "')", 0);
focusElement(radio[0].form.name,radio[0].name);
return false;
}
</script>
<script language="JavaScript">
function validateForm(form) {
if (isNotEmpty(form.name1) && isNotEmpty(form.name2)) {;}else{return false;
}
</script>
<title>JS验证程序Sample</title></head>
<body>
<form method="GET" action="index.htm" name="sampleForm" onsubmit="return validateForm(this)">
<p>姓名:
<input type="text" size="30" name="name1" id="name1" />
</body>
</html>
表单验证 很有用
长度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超过50个字符!");
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>
2 只能是汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
3 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown="onlyEng();">
4 只能是数字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>
<input onkeydown="onlyNum();">
5 只能是英文字符和数字
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
6 验证油箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7 屏蔽关键字(这里屏蔽sex和****)
<script language="javascript1.2">
function test() {
if((a.b.value.indexOf ("sex") == 0)||(a.b.value.indexOf ("****") == 0)){
alert("");
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit="return test()">
<input type=text name=b>
<input type="submit" name="Submit" value="check">
</form>
8 两次输入密码是否相同
<FORM METHOD=POST ACTION="">
<input type="password" id="input1">
<input type="password" id="input2">
<input type="button" value="test" onclick="check()">
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
</script>
网页表单的javascript集成验证方法举例
原理:
表单验证无非是要对要收集每一条信息进行验证,也就是要写一个名为
frmValid的javascript函数,在其中执行如下操作:
...
if (待验证条目 不符合条件)
{
alert('出错了!');
待验证条目.focus();
return false;
}
...
// all right
return true;
当然,<form ... onsubmit='return frmValid()'>必须包含在
HTML代码中。想想看,待验证条目越多代码越长,也就越容易出错。
下面我们把验证条目放到一个数组里,如下:
elemArray = new Array(
'待验证条目名',
'验证条件',
'出错提示');
那么验证代码将大大精简,我们只要如下使用循环就可实现上述冗长
代码时下的功能,这里我们用with和eval语句构造判断条件:
with(eval('obj.'+elems[0]))
{
if(eval(elems[1]))
{
window.alert(elems[2]);
focus();
return false;
}
}
我们建立多位数组就可实现循环遍历每个条目:
elems = new Array(
new Arrary( ...),
...
);
for(i = 0; i < elems.length; i++)
{
// 上面的验证语句
}
实战:
1、使用如下例子编写验证脚本:
<SCRIPT LANGUAGE="javascript" type="text/javascript">
//
// Function: frmValid
// ------------------
// Author hongz
// Usage: YourForm.onsbumit="return frmValid(this)".
// Purpose: To validate form elements in an integrated way.
//
function frmValid(obj)
{
// Elements array, initialization for validation
elems = new Array(
new Array(
'username', // name of elements to be validated
'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0',
// validation condition
'无效的用户名:只能输入6-20位字母、数字、下划线的组合!'),
// prompt on failure
new Array(
'password',
'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0',
'无效的密码:只能输入6-20位字母、数字、下划线的组合!'),
new Array(
'email',
'isMail(value)==false',
'Email是您在网上的重要联络工具,请务必正确填写!')
);
// Validate here, using eval statement.
for(i = 0; i < elems.length; i++)
{
with(eval('obj.'+elems[0]))
{
if(eval(elems[1]))
{
window.alert(elems[2]);
focus();
return false;
}
}
}
return true;
}
//-->
</SCRIPT>
2、为form添加onsubmit属性:
<form ... onsubmit='return frmValid(this)'>
Javascript客户端验证代码
代码:
--------------------------------------------------------------------------------
<SCRIPT language=JavaScript><!--
function passwordt(theForm){
if (theForm.user_name.value == ""){
alert("登录用户名不能为空,请重新填写!");
theForm.user_name.focus();
return (false);
}
if (theForm.user_pass.value == ""){
alert("登录密码不能为空,请重新填写!");
theForm.user_pass.focus();
return (false);
}
if (theForm.user_pass.value.length < 3){
alert("登录密码不能少于3个字符,请重新填写!");
theForm.user_pass.focus();
return (false);
}
if (theForm.re_password.value == ""){
alert("确认新密码不能为空,请重新填写!");
theForm.re_password.focus();
return (false);
}
if (theForm.re_password.value.length < 3){
alert("确认新密码不能少于3个字符,请重新填写!");
theForm.re_password.focus();
return (false);
}
if (theForm.user_pass.value != theForm.re_password.value){
alert("新密码和确认新密码不同,请重新填写!");
theForm.user_pass.focus();
return (false);
}
if (theForm.user_namec.value=="") {
alert ('请填写姓名!');
theForm.user_namec.focus();
return false;
}
if ((!theForm.user_sex(0).checked)&&(!theForm.user_sex(1).checked)){
alert ('请选择用户性别!');
theForm.user_sex(0).focus();
return false;
}
if ((theForm.user_birth_year.value == "")||(fucCheckNUM(theForm.user_birth_year.value)==0)||(theForm.user_birth_year.value.length!=4)||((theForm.user_birth_year.value <1900) || (theForm.user_birth_year.value >2002 ) )) {
alert("请填写正确的出生年份!");
theForm.user_birth_year.focus();
return (false);
}
if (theForm.user_birth_month.value=="0"){
alert("请选择出生月份!");
theForm.user_birth_month.focus();
return (false);
}
if (theForm.user_birth_day.value=="0"){
alert("请选择出生日期!");
theForm.user_birth_day.focus();
return (false);
}
if ((theForm.user_birth_month.value=="2") && (theForm.user_birth_day.value>29)){
alert("请选择正确的出生日期!");
theForm.user_birth_month.focus();
return (false);
}
if (((theForm.user_birth_month.value=="4")||(theForm.user_birth_month.value=="6")||(theForm.user_birth_month.value=="9")||(theForm.user_birth_month.value=="11")) && (theForm.user_birth_day.value==31)){
alert("请选择正确的出生日期!");
theForm.user_birth_month.focus();
return (false);
}
if (theForm.user_country.value=="") {
alert("请选择所在国家!");
theForm.user_country.focus();
return (false);
}
if (theForm.user_city.value =="") {
alert("请选择城市!");
theForm.user_city.focus();
return (false);
}
if (theForm.user_adds.value == "" ){
alert("家庭住址不能为空,请重新填写!");
theForm.user_adds.focus();
return (false);
}
if (theForm.user_postcode.value == "" ) {
alert("邮政编码不能为空,请重新填写!");
theForm.user_postcode.focus();
return (false);
}
if (theForm.user_tel.value == "" ) {
alert("邮政编码不能为空,请重新填写!");
theForm.user_tel.focus();
return (false);
}
if (theForm.user_mail.value=="") {
alert("请填写EMAIL!");
theForm.user_mail.focus();
return (false);
}
if ((theForm.user_mail.value!="") && (chkemail(theForm.user_mail.value)==0)) {
alert("EMAIL格式不对,请重新填写!");
theForm.user_mail.focus();
return (false);
}
return (true);
}
function chkemail(a){
var i=a.length;
var temp = a.indexOf('@');
var tempd = a.indexOf('.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
function fucCheckNUM(NUM) {
var i,j,strTemp;
strTemp="0123456789";
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++) {
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1) {
return 0;
}
}
return 1;
}
function chg_nation(nation){
if (nation!='cn'){
ini_province(nation);
document.user_form.selProvince.disabled = true;
document.user_form.selProvince.value="国外城市";
document.user_form.selCity.value="国外城市";
}else{
ini_province(nation);
document.user_form.selProvince.disabled = false;
document.user_form.selProvince.value="0";
document.user_form.selCity.value="";
}
}
function chg_province(province){
obj=document.getElementById("list_city");
obj.src="list_city.php?province="+province;
}
//-->
</SCRIPT>