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

xiaoxiao2021-02-28  124

<!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>
转载请注明原文地址: https://www.6miu.com/read-30268.html

最新回复(0)