<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="wap-font-scale" content="no">
<meta name="applicable-device" content="mobile">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>demo</title>
<link rel="stylesheet" href="style/basic.css" type="text/css" />
<link rel="stylesheet" href="style/guahao.css" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="cont">
<h3 class="heading">提交信息</h3>
<form action="info.php" name="infoForm" method="post">
<ul class="order">
<li>
<label for="username">姓 名</label>
<p><input type="text" id="username" name="username" placeholder="请输入您的姓名" maxlength="60"><p></li>
<li>
<label for="phone">联系电话</label>
<p><input type="text" id="phone" name="phone" placeholder="请输入您的电话" maxlength="20"></p>
</li>
<li>
<label for="depa">预约项目</label>
<p>
<select name="depa" id="depa">
<option value="1" selected>选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
</select>
</p>
</li>
<li>
<label>预约时间</label>
<p>
<input type="radio" name="day" id="today" value="1" checked><label for="today">今天</label>
<input type="radio" name="day" id="tomorrow" value="2"><label for="tomorrow">明天</label>
<input type="radio" name="day" id="postnatal" value="3"><label for="postnatal">后天</label>
<input type="radio" name="day" id="week" value="4"><label for="week">一周内</label>
</p>
</li>
</ul>
<div class="btn">
<input type="submit" value="提交" class="f_l">
<a href="/zixun/" target="_blank" rel="nofollow" class="f_l">快速问医生</a>
</div>
</form>
</div>
<script>
function $id(id){
return document.getElementById(id);
}
$(function(){
$id(‘username‘).onblur = function(){
usernameOnblur(this);
};
$id(‘phone‘).onblur = function(){
phoneOnblur(this);
};
document.infoForm.onsubmit = function(){
return check();
};
});
function usernameOnblur(obj){
var pattern = new RegExp("[`~!@#$^&*()=|{}‘:;‘,\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“‘。，、？]")
var str = "";
for (var i = 0; i < obj.value.length; i++) {
str = str+obj.value.substr(i, 1).replace(pattern, ‘‘);
}
$id(‘username‘).value = str;
}
function phoneOnblur(obj){
var re = /^1\d{10}$/;
if (re.test(obj.value)) {
return true;
}else{
return false;
}
}
function check(){
var phone = phoneOnblur($id(‘phone‘));
if(phone){
return true;
}else{
alert(‘填写的手机号码不正确‘);
return false;
}
}
</script>
</body>
</html>
?
效果图：
?
?
原文：http://onestopweb.iteye.com/blog/2274203