JS 正则验证表单

<!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>
效果图：
猜你喜欢
