<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery验证表单的学习</title>
<!-- 导入jquery库 -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 写jquery的单一入口 -->
<script type="text/javascript">
$(function(){
//验证手机号的方法
function isPhoneNo(phone){
//写匹配规则
var pattern = /^1[3-9]d{9}$/;
//返回匹配结果
return pattern.test(phone);
}
//绑定提交按钮的单击事件
$("#b2").click(function(){
//声明变量存储动态手机号
var _v= $(".phoneval").val();
if( isPhoneNo(_v) == false){
alert("您的手机号不正确，需要重新输入");
$(".phoneval").val("")
return false;
}
});
//绑定键盘回车事件 keydown 不用离开键盘就有效果 keyup只有离开键盘才有效果
$(document).keydown(function(event){
//判断回车键
if(event.keyCode ==13){
//帮用户点按钮
$("#b2").click();
}
});
});
</script>
</head>
<body>
<!-- 表单提交给后端，method方式，get和post -->
<form action="http://192.168.1.238" method="post">
手机号：<input class='phoneval' name="phone" style=" 400px;padding: 5px;" type="text" placeholder="请输入十一位的手机号"/>
<br/><br/>
<input id='b2' type="submit" value="提交数据"/>
</form>
</body>
</html>