📄 9-1 表单数据的有效性验证.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>9-1 表单数据的有效性验证</title>
<!-- 样式表 -->
<style>
* { font-size:12px; font-family:宋体, Arial; font-weight:normal; color:#333; } /*规定了所有的字体样式*/
.red { color:red; font-weight:bold; }
</style>
<script>
var REG_VALIDATE = new Array();
REG_VALIDATE["chn"] = /^[\u0391-\uFFE5]+$/;
REG_VALIDATE["age"] = /^\d{1,3}$/;
REG_VALIDATE["tel"] = /^((\(0?\d{2,3}\))|(0?\d{2,3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/;
REG_VALIDATE["email"] = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
REG_VALIDATE["required"] = /.+/;
function chkform(formObj){
var eles, err, strValue, strType, obj, objFirstInput;
eles = formObj.elements;
err = 0;
for(var i=0; i<eles.length; i++){
strValue = eles[i].value;
strType = String(eles[i].verify).toLowerCase();
switch(strType){
case "chn":
case "age":
case "tel":
case "email":
case "required":
if(REG_VALIDATE[strType].test(strValue)){
displayErrMsg(eles[i], " ");
}else{
if(!objFirstInput)objFirstInput = eles[i];
err++; displayErrMsg(eles[i], eles[i].msg);
}
break;
case "repass":
obj = document.getElementById(eles[i].id.replace(/^re\_/i,""));
if(!obj)continue;
if(obj.value != strValue){
if(!objFirstInput)objFirstInput = eles[i];
err++; displayErrMsg(eles[i], eles[i].msg);
}else{
displayErrMsg(eles[i], " ");
}
break;
}
}
if(err>0){
objFirstInput.focus();
return(false);
}else{
alert("可以提交，请等待");
return(true);
}
}
function displayErrMsg(ipt, strMsg){
var obj;
obj = ipt.parentNode.nextSibling;
obj.innerHTML = strMsg;
}
</script>
</head>
<body style="overflow:auto;">
注册测试页面<br/>
<form onsubmit="return chkform(this);">
<table>
<tr>
<td>姓名</td>
<td><input name="txtName" verify="chn" msg="姓名必须是中文"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>年龄</td>
<td><input name="txtAge" verify="age" msg="年龄必须是三位以内的数字"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>密码</td>
<td><input name="txtPass" id="txtPass" type="password" verify="required" msg="密码必须填写"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>确认密码</td>
<td><input name="RetxtPass" id="re_txtPass" type="password" verify="repass" msg="确认密码不符合"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>电话号码</td>
<td><input name="txtTel" verify="tel" msg="无此电话号码"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input name="txtEmail" verify="email" msg="E-mail地址不合法"></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="txtInfo"></textarea></td>
<td class="red"><!-- 这一栏被用来显示提示信息 --></td>
</tr>
<tr>
<td colspan=3 align="center">
<input type="submit" value="提交">
<input type="reset" value="重填">
</td>
</tr>
</table>
</form>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -