Heim > Artikel > Web-Frontend > Verwendung regulärer Ausdrücke zur Implementierung der Formularvalidierung in HTML
Verwendung regulärer Ausdrücke zur Implementierung der Formularvalidierung in HTML
- 巴扎黑Original
- 2018-05-29 15:14:102528Durchsuche
In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung regulärer Ausdrücke zum Überprüfen von Tabellen in HTML vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert.
Lassen Sie mich den HTML-Code der Prüftabelle für reguläre Ausdrücke mit Ihnen teilen. Der spezifische Codeinhalt lautet wie folgt:
<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>Anhang: Einige häufig Verwendete Regeln:
"^\d+$" //Nicht negative Ganzzahl (positive Ganzzahl + 0)
"^[0-9]*[1- 9][0-9]*$" // Positive Ganzzahl
"^((-\d+)|(0+))$" //Nicht positive Ganzzahl (negative Ganzzahl + 0 )
"^- [0-9]*[1-9][0-9]*$" // Negative ganze Zahl
"^-?\ d+$" // Ganzzahl
"^\d+(\.\d+)?$" //Nicht negative Gleitkommazahl (positive Gleitkommazahl + 0)
"^(([0-9]+\.[ 0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9 ]*\.[0-9]+)|([0- 9]*[1-9][0-9]*))$" //Positive Gleitkommazahl
" ^((-\d+(\.\d+)?)|(0 +(\.0+)?))$" //Nicht positive Gleitkommazahl (negative Gleitkommazahl + 0)
"^(-(([0-9]+\.[0 -9]*[1-9][0-9]*)|([0-9]*[1-9][ 0-9]*\.[0-9]+)|([0-9 ]*[1-9][0-9]*)))$" // Negative Gleitkommazahl
"^(-?\d+)(\.\d+)?$" // /Gleitkommazahl
"^[A-Za-z]+$" //A Zeichenfolge bestehend aus 26 englischen Buchstaben
"^[A-Z]+ $" //Eine Zeichenfolge bestehend aus 26 englischen Großbuchstaben
"^[a-z]+$" //Eine Zeichenfolge bestehend aus 26 englischen Kleinbuchstaben
"^[A-Za-z0-9]+$" //Eine Zeichenfolge bestehend aus Zahlen und 26 englischen Buchstaben
"^\w+$" //Eine aus Zahlen bestehende Zeichenfolge, eine Zeichenfolge aus 26 englischen Buchstaben oder Unterstrichen
"^[\w-]+(\.[\w-] +)*@[\w-]+(\.[ \w-]+)+$" //E-Mail-Adresse
"^[a-zA-z]+://( \w+(-\w+)*)(\.(\ w+(-\w+)*))*(\?\S*)?$" //url
Das obige ist der detaillierte Inhalt vonVerwendung regulärer Ausdrücke zur Implementierung der Formularvalidierung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!