Home > Article > Web Front-end > Using regular expressions to implement form validation in HTML
Using regular expressions to implement form validation in HTML
- 巴扎黑Original
- 2018-05-29 15:14:102509browse
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.
Let me share with you the HTML code. Example code of the regular expression check table. The specific code content is as follows:
<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 floating point number
"^(-?\\d+)(\\ .\\d+)?$" //Floating point number
"^[A-Za-z]+$" //A string composed 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 string composed of
"^[A-Za-z0-9]+$" //A string composed 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
The above is the detailed content of Using regular expressions to implement form validation in HTML. For more information, please follow other related articles on the PHP Chinese website!