JavaScript使用简单正则表达式的数据验证功能示例
本文实例讲述了JavaScript使用简单正则表达式的数据验证功能。分享给大家供大家参考，具体如下：
<!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>希望本文所述对大家JavaScript程序设计有所帮助。
更多JavaScript使用简单正则表达式的数据验证功能示例相关文章请关注PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
