正規表現を使用して HTML でフォーム検証を実装する
May 29, 2018 pm 03:14 PM
html
この記事では、主に正規表現を使用してテーブルをチェックするHTMLのサンプルコードを紹介します。コードはシンプルで理解しやすく、非常に優れており、必要な友人は参照できます
以下に共有します。正規表現を使用して HTML を使用してテーブルをチェックする方法。コード例、具体的なコードの内容は次のとおりです:
<span style="font-size:24px;color:#cc6600;"> 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始，以"$"结束。</span>
ログイン後にコピー
<span style="font-size:24px;color:#cc6600;">以下让我们看看一个实例。</span>
ログイン後にコピー
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
form table tr td{
border: 1px solid lightgrey;
text-align: center;
}
form table tr td input{
width: 97%;
}
</style>
<script language="JavaScript" type="text/javascript">
//判断规则（正则表达式）
function goto() {
var name = document.getElementById("name");
var pwd = document.getElementById("pwd");
var pwd2 = document.getElementById("pwd2");
var pnum = document.getElementById("pnum");
var phone = document.getElementById("phone");
var telephone = document.getElementById("telephone");
var email = document.getElementById("email");
if (name.value.trim().length<=8){
alert("用户名长度必须大于八位");
name.focus()
name.value="";
return;
}
// 规则必须包括大小写字母，数字
var regex = /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z])$)[\da-zA-Z]{6,}$/;
// var regex = /^[A-z0-9]{10,20}$/;
if ( !pwd.value.match(regex)){
alert("密码不符合规定");
pwd.focus()
pwd.value="";
return;
}
if (pwd.value != pwd2.value){
alert("两次输入的密码不相同");
pwd2.focus()
pwd.value="";
pwd2.value="";
return;
}
var rege=/^\d{17}X$|^\d{15}$/;
if (!rege.test(pnum.value)){
alert("身份证不符合规定");
pnum.focus()
pnum.value="";
return;
}
var regex2 = /^\d{4}-\d{7}$/;//判断座机号
if (!regex2.test(phone.value)){
alert("座机号码不符合规定");
phone.focus()
phone.value="";
return;
}
var regex3 = /^1[3,5,7,8]\d{9}$/;
if (!regex3.test(telephone.value)){
alert("手机号码不符合规定");
telephone.focus()
telephone.value="";
return;
}
//test方法必须用反斜杠转义
var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!regex4.test(email.value)){
alert("邮箱不符合规定");
email.focus()
email.value="";
return;
}
}
</script>
</head>
<body>
<form>
<table style="width:600px;height: 300px;border: 1px solid lightgrey">
<tr>
<td width="18%">登录名:</td>
<td><input id="name"type="text"></td>
<td width="50%">长度大于八位</td>
</tr>
<tr>
<td>登录密码:</td>
<td><input id="pwd"type="password"></td>
<td>长度大于十位，包含字母数字</td>
</textarea></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input id="pwd2" type="password"></td>
</tr>
<tr>
<td>身份证号码:</td>
<td><input id="pnum" type="text"></td>
<td>15位或18位最后一个是X</td>
</tr>
<tr>
<td>固定电话:</td>
<td><input id="phone"type="text"></td>
<td>格式xxxx-xxxxxxx</td>
</tr>
<tr>
<td>手机号码:</td>
<td><input id="telephone"type="text"></td>
<td>11位整数</td>
</tr>
<tr>
<td>电子邮件:</td>
<td><input id="email"type="text"></td>
<td>xxxx@xxx.xxx xxx@xxx.xxx.xx</td>
</tr>
<tr>
<td>现居住地:</td>
<td><select>
<option>--选择省份--</option>
<option>北京</option>
<option>河北</option>
<option>广西</option>
</select></td>
<td><select>
<option>--选择城市--</option>
<option>烟台</option>
<option>青岛</option>
<option>哈尔滨</option>
</select></td>
</tr>
<tr>
<td colspan="1"></td>
<td><input id="submit" type="button" value="提交注册信息" style="width: 100px" onclick="goto()"></td>
<td><input type="reset" value="重置" style="width: 60px"></td>
</tr>
</table>
</form>
</body>
</html></span>ログイン後にコピー
添付ファイル: よく使用されるルール:
"^\d+$" //非負の整数 (正)整数 + 0)
"^[0- 9]*[1-9][0-9]*$" //正の整数
"^((-\d+)|(0+))$ " //非正の整数 (負の整数 + 0)
"^-[0-9]*[1-9][0-9]*$" // 負の整数
"^-?\ d+$" // 整数
"^\d+ (\.\d+)?$" // 非負の浮動小数点数（正の浮動小数点数 + 0）
"^(([0-9] +\.[0-9]*[1-9][0 -9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)| ([0-9]*[1-9][0-9 ]*))$" //正の浮動小数点数
"^((-\d+(\.\d+)?)|(0+ (\.0+)?))$" //非正の浮動小数点数 (負の浮動小数点数 + 0)
"^(-(([0-9]+\.[0-9]*) [1-9][0-9]*)|([0-9]* [1-9][0-9]*\.[0-9]+)|([0-9]*[1 -9][0-9]*)))$" //負の浮動小数点数
"^(-?\d+)(\.\d+)?$" //浮動小数点数
"^ [A-Za-z]+$" //英大文字26文字からなる文字列
"^[A-Z]+$" //英大文字26文字からなる文字列
"^[a-z]+$ " //英小文字26文字からなる文字列
"^[A-Za-z0-9]+$" //数字と英文字26文字からなる文字列
"^\w+$" //数字、26 文字の英字、またはアンダースコアで構成される文字 String
"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+ )+$" //メールアドレス
"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*( \?\S*)?$" // URL
以上が正規表現を使用して HTML でフォーム検証を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7281
9
7281
9
Java チュートリアル
1622
14
1622
14
CakePHP チュートリアル
1341
46
1341
46
Laravel チュートリアル
1258
25
1258
25
PHP チュートリアル
1205
29
1205
29
