Home >Web Front-end >HTML Tutorial >About how to use regular expressions to check tables in HTML
About how to use regular expressions to check tables in HTML
- 小云云Original
- 2017-12-11 10:46:011801browse
This article mainly introduces the example code of HTML using regular expressions to check tables. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it will be helpful to everyone.
<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>
Attachment: Some commonly used rules:
"^\\d+$" //Non-negative integer (positive integer + 0)
"^[0-9]* [1-9][0-9]*$" //Positive integer
"^((-\\d+)|(0+))$" //Non-positive integer (negative Integer + 0)
"^-[0-9]*[1-9][0-9]*$" // Negative integer
"^ -?\\d+$" //Integer
"^\\d+(\\.\\d+)?$" //Non-negative floating point number (positive floating point number + 0)
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9 ][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //Positive floating point number
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //Non-positive floating point number (negative floating point number + 0 )
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9] *[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" // Negative float Points
"^(-?\\d+)(\\.\\d+)?$" //Floating point number
"^[A-Za- z]+$" //A string consisting of 26 English letters
"^[A-Z]+$" //A string consisting of 26 uppercase English letters
"^[a-z]+$" //A string consisting of 26 lowercase English letters
"^[A-Za-z0-9]+$" / /A string consisting of numbers and 26 English letters
"^\\w+$" //A string consisting of numbers, 26 English letters or underscores
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //email Address
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)* ))*(\\?\\S*)?$" //url
Have you learned it? Hurry up and give it a try.
Related recommendations:
The most complete summary of commonly used regular expressions in the front end
Organization of regular expression registry verification notes
PHP regular expression collection
The above is the detailed content of About how to use regular expressions to check tables in HTML. For more information, please follow other related articles on the PHP Chinese website!