前端網頁匹配電話號碼
阿新 • • 發佈：2018-12-05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 驗證表單的學習</title>
<!-- 導庫 -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 寫jquery 的單一入口 -->
<script type=" text/javascript">
$(function(){
// 繫結鍵盤迴車事件
$(document).keyup(function(event){
// 判斷回車鍵
if (event.keyCode == 13){
// 幫使用者點按鈕
$("#b2").click();
} }); //驗證手機號的方法
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
}
});
});
</script>
</head>
<body>
<!-- 表單提交給後端 method 的 方式get /post-->
<form action="http://192.168.1.238" method="post">
手機號：<input class="phoneval" name= "phone" type="text" placeholder="請輸入11
位的手機號" style="padding : 10px; width: 200px"/>
<br/><br/>
<input id="b2" type="submit" value="提交資料"/> </form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 驗證表單的學習</title>
<!-- 導庫 -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 寫jquery 的單一入口 -->
<script type=" text/javascript">
$(function(){
// 繫結鍵盤迴車事件
$(document).keyup(function(event){
// 判斷回車鍵
if (event.keyCode == 13){
// 幫使用者點按鈕
$("#b2").click();
} }); //驗證手機號的方法
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
}
});
});
</script>
</head>
<body>
<!-- 表單提交給後端 method 的 方式get /post-->
<form action="http://192.168.1.238" method="post">
手機號：<input class="phoneval" name= "phone" type="text" placeholder="請輸入11
位的手機號" style="padding : 10px; width: 200px"/>
<br/><br/>
<input id="b2" type="submit" value="提交資料"/> </form>
</body>
</html>