js实现编辑框用户名 密码 日期选择 按钮提交特效代码

来源:互联网 发布:linux rpm包下载网站 编辑:程序博客网 时间:2024/06/05 11:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type='text'],
input[type='password']{width: 150px; height: 20px; line-height: 20px;margin-top: 20px;}
select{height: 20px;margin-top: 20px;}
input[type='submit']{width: 120px; height: 30px; margin-top: 30px;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var phone=$("[name='phone']").val();
var patphone=/0[0~9]{3}-[0-9]{7,8}/;
var email=$("[name='email']").val();
var patemail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;




$("#form1").submit(function(){
var name=$("[name='name']").val();
if (name==null||$.trim(name)=="") {
alert("必须输入用户名");
return false;
}


if (!patemail.test(email)) {
alert('邮件格式不合法');
return false;
}

return true;
});
});
</script>
</head>
<body>
<form action="1.html" method="get" id="form1">
用户名:<input type="text" name="name"></input><br>
密码:<input type="password" name="pwd"></input><br>
电话:<input type="text" name="phone"></input>
邮箱:<input type="text" name="email"></input>
生日:<select>
<option name="year" value="1994">1994</option>
<option name="year" value="1993">1993</option>
<option name="year" value="1992">1992</option>
 </select>
 <select>
<option name="month" value="01">01</option>
<option name="month" value="02">02</option>
<option name="month" value="03">03</option>
 </select>
 <select>
<option name="day" value="11">11</option>
<option name="day" value="12">12</option>
<option name="day" value="13">13</option>
 </select><br>


<input type="submit" value="提交"></input>
</form>


</body>
</html>
原创粉丝点击