<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则验证表单域</title>
<script>
//验证表单
function isokUsername(){
// NaN代表当运算无法返回正确的数值时，就会返回“NaN”值。
if (document.getElementById("username").value ==""||document.getElementById("username").value==NaN){
document.getElementById('usernameM').innerHTML="用户名不能为空";
return false;
}
return true;
}
function isokEmail(){
//校验邮箱是否为空
if (document.getElementById("email").value ==""||document.getElementById("email").value==NaN){
document.getElementById('emailM').innerHTML="邮箱不能为空"
return false;
}
//如果不能匹配
var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if (!document.getElementById("email").value.match(email)){
document.getElementById('emailM').innerHTML="邮箱格式错误";
return false;
}
return true;
}
function isokQQ(){
if (document.getElementById("QQ").value.length <8||document.getElementById("QQ").value.length >10){
document.getElementById('QQM').innerHTML="qq必须输入8-10位";
return false;
}
var QQ = /^[0-9]*[1-9][0-9]*$/;
//如果不能匹配
if (!document.getElementById("QQ").value.match(QQ)){
document.getElementById('QQM').innerHTML="qq必须输入8-10位";"QQ格式错误";
return false;
}
return true;
}
function isokPhone(){
// 电话号码验证格式
var phone = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15\d{9}|18\d{9}|14\d{9}$/;
//如果不能匹配
if (!document.getElementById("phone").value.match(phone)){
document.getElementById('phoneM').innerHTML = "电话格式错误";
return false;
}
return true;
}
function isok(){
if(!isokUsername()&&!isokEmail()&&!isokQQ()&&!isokPhone()){
alert("您的信息有误");
return false;
}
return true;
}
</script>
</head>
<body>
<h2>留言咨询</h2>
<div id="liuyanzixun">
<form action="1.html" id="formId" οnsubmit="return isok()">
<table id="tbword">
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td class="td1">姓名：</td><td><input type="text" id="username" οnblur="isokUsername()"/></td><td id="usernameM"></td>
</tr>
<tr>
<!-- 单元格 -->
<td class="td1">Email：</td><td><input type="text" id="email" οnblur="isokEmail()"/></td><td id="emailM"></td>
</tr>
<tr>
<!-- 单元格 -->
<td class="td1">QQ：</td><td><input type="text" id="QQ" οnblur="isokQQ()"/></td><td id="QQM"></td>
</tr>
<tr>
<!-- 单元格 -->
<td class="td1">电话：</td><td><input type="text" id="phone" οnblur="isokPhone()"/></td><td id="phoneM"></td>
</tr>
<tr>
<!-- 单元格 rows5行 cols列数-->
<td class="td1">内容：</td><td><textarea type="text" id="td_content" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<!-- 单元格 colspan：合并两列 -->
<td colspan="2" style="text-align:right">
<input type="reset" id="btnreset" value="取消"/>
<input type="submit" id="btnsubmit" value="提交"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
扫一扫
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
