<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS 正则验证表单</title> </head> <body> <form action="###a" method="post" onSubmit="javascript:return check();" name="myform" target="_blank"> <ul> <li> <span>姓名</span> <input type="text" name="username" onfocus="if(this.value==this.defaultValue){this.value='';};" onblur="if(this.value==''){this.value=this.defaultValue;}" value="您的姓名"> </li> <li> <span>电话</span> <input type="text" name="phone" onfocus="if(this.value==this.defaultValue){this.value='';};" onblur="if(this.value==''){this.value=this.defaultValue;}" value="您的电话号"> </li> <li><span>描述</span> <input type="text" name="cont" onFocus="if(this.value==this.defaultValue){this.value='';};" onBlur="if(this.value==''){this.value=this.defaultValue;}" value="请输入描述内容"> </li> </ul> <button type="submit">提交信息</button> </form> <script type="text/javascript"> function check(){ if(document.myform.username.value=="" || document.myform.username.value=="您的姓名"){ alert("请填入您的姓名"); document.myform.username.focus(); return false; } if(!document.myform.username.value.match(/^[\u4e00-\u9fa5]{2,5}$/)){ alert("姓名输入有误"); document.myform.username.focus(); return false; } if(document.myform.phone.value==""||document.myform.phone.value=="您的电话号"){ alert("请输入您的联系电话"); document.myform.phone.focus(); return false; } if(!document.myform.phone.value.match(/^(^(\d{3,4}-)?\d{7,8})$|(1[358]{1}[0-9]{9})$/)){ alert("联系电话格式不正确"); document.myform.phone.focus(); return false; } if (document.myform.cont.value==""||myform.cont.value=="请输入描述内容"){ alert("请输入描述内容"); document.myform.cont.focus(); return false; } return true; } </script> </body> </html>
效果图: