JS使用插件完成表单的验证-js教程-PHP中文网

首页

web前端

js教程

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

巴扎黑

Sep 08, 2017 am 10:50 AM

javascript表单验证

本文实例讲述了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

以上是JS使用插件完成表单的验证的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles