L'exemple de cet article décrit la fonction de validation des données de JavaScript à l'aide d'expressions régulières simples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register-reg</title>
<script type="text/javascript" language="javascript">
function checkName() {
var nameElement = document.getElementById("name");
//var regExp = /^(a-z)[^a-z\d_]/i;
var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
var regExp2 = /^[A-Za-z]/i;//匹配字符串开始位置为字母
var resultElement = document.getElementById("resName");
if (nameElement.value.match(regExp) && nameElement.value.match(regExp2) && nameElement.value.length >= 6) {
//匹配成功
//会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6！";
return false;
}
}
function checkPwd() {
var pwdElement = document.getElementById("pwd");
var regExp = /[a-zA-Z\d_]/i; // \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
var regExp2 = /[a-zA-Z]/i; //匹配字母
var regExp3 = /\d/i; //匹配数字
var resultElement = document.getElementById("resPwd");
if (pwdElement.value.match(regExp) && pwdElement.value.match(regExp2) && pwdElement.value.match(regExp3) && pwdElement.value.length >= 6) {
//匹配成功
//密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6！";
return false;
}
}
function checkPwd2() {
var pwdElement = document.getElementById("pwd");
var pwd2Element = document.getElementById("pwd2");
var resultElement = document.getElementById("resPwd2");
if (pwdElement.value == pwd2Element.value) {
//重输密码与之前密码完全匹配
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "密码不一致！";
return false;
}
}
function checkGentle() {
var gentleElement = document.getElementById("gentle");
var resultElement = document.getElementById("resGentle");
if ((gentleElement.value == "男" || gentleElement.value == "女") || (gentleElement.value == "m" || gentleElement.value == "f") || (gentleElement.value == "male" || gentleElement.value == "famale")) {
//性别判断是否在：男、女、male、famale、m、f 之内
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "性别判断是否在：男、女、male、famale、m、f 之内！";
return false;
}
}
function checkAge() {
var ageElement = document.getElementById("age");
var resultElement = document.getElementById("resAge");
if (parseInt(ageElement.value) > 0 && parseInt(ageElement.value) <= 150) {
//如果年龄在0~150之间
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "年龄在0~150之间！";
return false;
}
}
function checkMail() {
var mailElement = document.getElementById("mail");
var regExp = /[^a-z0-9_]/gi; // 匹配非字母、数字、下划线的字符
var regExp2 = /[a-z]/gi; // 匹配字母
var resultElement = document.getElementById("resMail");
if (!mailElement.value.match(regExp)) {//如果出现非字母、数字、下划线的字符
resultElement.innerHTML = "邮箱地址不正确！";
return false;
}
else {
if (mailElement.value.indexOf(".") - mailElement.value.indexOf("@") >= 2) {
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = "邮箱地址不正确！";
return false;
}
}
}
function checkTel() {
var telElement = document.getElementById("tel");
var regExp = /\d{7,12}/g;// 匹配7~12位电话数字
var regExp2 = /[^0-9]/g; // 是否有数字以外的字符
var resultElement = document.getElementById("resTel");
if (telElement.value.match(regExp) && telElement.value.length <= 12) {
if (telElement.value.match(regExp2)) {
resultElement.innerHTML = "电话号码为纯数字，且位于7~12位之间！";
return false;
}
else {
resultElement.innerHTML = "";
return true;
}
}
else {
resultElement.innerHTML = "电话号码为纯数字，且位于7~12位之间！"; //!telElement.value.match(regExp2) &&
return false;
}
}
function checkAll() {
if (checkName() && checkPwd() && checkPwd2() && checkGentle() && checkAge() && checkMail() && checkTel()) {
alert("恭喜,填写的信息正确！");
}
else {
alert("错误,请确认填写的信息是否正确！");
}
}
//当窗体加载完成时执行
window.onload = function () {
var inputElements = document.getElementsByTagName("input");
inputElements[0].onblur = function () {
checkName();
}
inputElements[1].onblur = function () {
checkPwd();
}
inputElements[2].onblur = function () {
checkPwd2();
}
inputElements[3].onblur = function () {
checkGentle();
}
inputElements[4].onblur = function () {
checkAge();
}
inputElements[5].onblur = function () {
checkMail();
}
inputElements[6].onblur = function () {
checkTel();
}
inputElements[7].onclick = function () {
checkAll();
}
}
</script>
<style type="text/css">
body{ font-size:16px;
font-weight:600;
font-family:微软雅黑;
line-height:30px;
}
thead{ text-align:center;
}
input{ width:150px;
}
input[type=button]{ height:38px;
font-size:20px;
font-weight:600;
}
ul{ border:1px solid #c3c3c3;
}
li{ list-style-type:square;
}
</style>
</head>
<body>
<form action="" method="post">
<table>
<thead><tr><td colspan="2"><h2>表单验证</h2></td></tr></thead>
<tr><td>会员名：</td><td><input type="text" id="name" /></td><td id="resName"></td></tr>
<tr><td>密码：</td><td><input type="password" id="pwd" /></td><td id="resPwd"></td></tr>
<tr><td>重复密码：</td><td><input type="password" id="pwd2" /></td><td id="resPwd2"></td></tr>
<tr><td>性别：</td><td><input type="text" id="gentle" /></td><td id="resGentle"></td></tr>
<tr><td>年龄：</td><td><input type="text" id="age" /></td><td id="resAge"></td></tr>
<tr><td>电子邮件：</td><td><input type="text" id="mail" /></td><td id="resMail"></td></tr>
<tr><td>联系号码：</td><td><input type="text" id="tel" /></td><td id="resTel"></td></tr>
<tr><td></td><td><input type="button" value="注册" id="checkAll" /></td></tr>
</table>
</form>
<ul>
<li>会员名为字母、数字、下划线组成，并且字母为开头，长度不小于6</li>
<li>密码为字母、数字、下划线组成，并且必须有字母、数字，长度不小于6</li>
<li>性别判断是否在：男、女、male、famale、m、f 之内</li>
<li>年龄在0~150之间</li>
<li>邮箱地址</li>
<li>电话号码为纯数字，且位于7~12位之间！</li>
</ul>
</body>
</html>Copier après la connexion
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
Pour des articles plus pertinents sur des exemples de fonctions de validation de données utilisant des expressions régulières simples en JavaScript, veuillez faire attention au site Web PHP chinois !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
