JS使用插件完成表单的验证-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JS使用插件完成表单的验证

巴扎黑

Sep 08, 2017 am 10:50 AM

javascriptbentukmengesahkan

本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：

这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/

具体代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;title>无标题文档&lt;/title>
&lt;style> 
body,td{font:12px Verdana;color:#333}
input,textarea,select,td,th{font:12px Verdana;color:#333;border:1px solid #999;background:#fff}
table{border-collapse:collapse;}
th{font:bold 12px Verdana; text-align:right;padding:5px;}
td{padding:3px;line-height:1.8;}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
/*输入框样式*/
input[type=text],input[type=password],textarea{border:1px solid #ccc;padding:2px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;outline:medium none;line-height:25px;
-webkit-transition:all 0.15s ease-in 0s;
-moz-transition:all 0.15s ease-in 0s;
-o-transition:all 0.15s ease-in 0s;
font-family:"Microsoft YaHei",Verdana,Arial;
font-size:14px;
vertical-align:top;
}
input[type=text],input[type=password]{height:25px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{/*border-color:rgba(82,168,236,0.8);*/border-color:#52a8ec;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset,0 0 5px rgba(82,168,236,0.6);outline:0 none;}
&lt;/style>
&lt;/head>
&lt;body>
&lt;h2>使用方法&lt;/h2>
&lt;p>第一步：需设定表单项数据类型&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;input type="text" name="name" &lt;strong style="color:#f00;">dataType="chinese[2,8]"&lt;/strong> />&lt;/p>
&lt;p>第二步：实例表单验证&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;script type="text/javascript">&lt;strong style="color:#f00;">new ValidatorForm(表单对象);&lt;/strong> &lt;/script>&lt;/p>
&lt;h3>dataType可选参数&lt;/h3>
&lt;table width="100%" border="0" cellspacing="0" cellpadding="0">
 &lt;tr>
 &lt;th colspan="3" style="text-align:left; background-color:#eee;">基础验证&lt;/th>
 &lt;/tr>
 &lt;tr>
  &lt;th>email&lt;/th>
  &lt;td>Email地址&lt;/td>
  &lt;td rowspan="11">&lt;strong>均可配合中括号使用&lt;/strong>，例如&lt;br />
  长度验证：chinese[1,10]　为限制只能输入1-10个全角字符，&lt;strong>注：一个全角字符长度为2&lt;/strong>&lt;br />
  数字大小验证：number[18,26]　为限制只能输入18-26的数字&lt;br />
  日期范围验证：date[1970-1-1,2012-12-12]　为限制1970-1-1至2012-12-12日期&lt;br />
  &lt;strong>上限及下限设定&lt;/strong>&lt;br />
  下限设定：chinese[1,]　至少输入1个或以上有效字符&lt;br />上限设定：chinese[,6]　最多输入6个有效字符&lt;br />number和date格式也类式&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>tel&lt;/th>
  &lt;td>电话：支持手机/固话，识别区号及全半角逗号分隔多项&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>mobile&lt;/th>
  &lt;td>手机号码&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>url&lt;/th>
  &lt;td>网址&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>number&lt;/th>
  &lt;td>数字&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>english&lt;/th>
  &lt;td>英文字母&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>chinese&lt;/th>
  &lt;td>全角字符&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>username&lt;/th>
  &lt;td>帐号：字母开头4-20位的字母数字加下划线组合&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>password&lt;/th>
  &lt;td>密码：4-20位字母数字或@!#$%^&*.~组合&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>date&lt;/th>
  &lt;td>日期&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>length&lt;/th>
  &lt;td>长度：格式“length[最小长度,最大长度]”&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th colspan="3" style="text-align:left; background-color:#eee;">其它验证&lt;/th>
 &lt;/tr>
 &lt;tr>
  &lt;th>Compare&lt;/th>
  &lt;td colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”&lt;br />
  比较符包括[>,>=,&lt;,&lt;=,!=,=]&lt;br />
  比较对象为表单项name,当表单有同名name值多项时取第一项&lt;br />
  比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比&lt;br />
  例如Compare[=password]&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;th>exec&lt;/th>
  &lt;td colspan="2">自定义函数：格式“exec[函数名]” &lt;br />
  传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
  &lt;br />&lt;/td>
 &lt;/tr>
&lt;/table>
&lt;h3>验证错误提示说明&lt;/h3>
&lt;p>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg&lt;/p>
&lt;p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;">&lt;input type="text" name="name" dataType="chinese[2,8]" &lt;strong style="color:#f00;">msg="姓名必需填写1-4个汉字"&lt;/strong> />&lt;/p>
&lt;form name="theForm" id="theForm" action="" method="get">
 &lt;h2>表单验证示例&lt;/h2>
 &lt;table align="center" width="100%">
 &lt;tr>
  &lt;td>真实姓名：&lt;/td>&lt;td>&lt;input type="text" name="Name" dataType="chinese[1,]" />&lt;span msgbox="1">请输入真实姓名&lt;/span>
  &lt;span id="vfMsgBox_Name">&lt;/span>
  &lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>英文名：&lt;/td>&lt;td>&lt;input type="text" name="Nick" dataType="english[1,10]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>主页：&lt;/td>&lt;td>&lt;input type="text" name="Homepage" dataType="url" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>密码：&lt;/td>&lt;td>&lt;input name="password" type="text" dataType="password" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>重复：&lt;/td>&lt;td>&lt;input name="password2" type="text" dataType="Compare[=password"密码]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>信箱：&lt;/td>&lt;td>&lt;input type="text" name="email" dataType="email[1,]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>信箱：&lt;/td>&lt;td>&lt;input type="text" name="email2" dataType="email Compare[=email"信箱]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>邮编：&lt;/td>&lt;td>&lt;input type="text" name="QQ" dataType="number[100000,999999]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>日期：&lt;/td>&lt;td>&lt;input type="text" name="date" dataType="date" />
  &lt;input type="text" name="date2" dataType="Compare[>date"起始日期,date]" />
  &lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>年龄：&lt;/td>&lt;td>&lt;input type="text" name="Year" dataType="number[18,28]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>年龄1：&lt;/td>&lt;td>&lt;input type="text" name="Year1" dataType="number[,18]" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>电话：&lt;/td>&lt;td>&lt;input type="text" name="Phone" dataType="tel" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>手机：&lt;/td>&lt;td>&lt;input type="text" name="mobile" dataType="mobile" />&lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td>生日：&lt;/td>&lt;td>&lt;input type="text" name="Birthday" dataTy

Atas ialah kandungan terperinci JS使用插件完成表单的验证. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Memahami Enjin JavaScript: Butiran PelaksanaanApr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

See all articles