[Application]表单验证 Validator v1.05

最新推荐文章于 2022-04-25 11:13:48 发布
最新推荐文章于 2022-04-25 11:13:48 发布
阅读量314 收藏
点赞数
分类专栏： [DT] 文章标签： application function input email javascript date
Validator是一款基于JavaScript的表单验证类，支持多种验证类型如邮箱、URL等，并提供三种错误提示模式。它能够简化网页设计者的开发流程，适用于客户端表单验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转自：蓝色理想

快捷方式：http://www.blueidea.com/tech/web/2004/2360.asp

虽然很古老，但是很经典，学习之必备，收藏之精品。

 

表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。

Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类，所以在调用时不需要实例化，直接以"类名+.语法+属性或方法名"来调用。此外，Validator还提供3种不同的错误提示模式，以满足不同的需要。

Validator目前可实现的验证类型有：
[JavaScript] 版
Validator目前可实现的验证类型有：
1.是否为空；
2.中文字符；
3.双字节字符
4.英文；
5.数字；
6.整数；
7.实数；
8.Email地址；
9.使用HTTP协议的网址；
10.电话号码；
11.货币；
12.手机号码；
13.邮政编码；
14.身份证号码(1.05增强)；
15.QQ号码；
16.日期；
17.符合安全规则的密码；
18.某项的重复值；
19.两数的关系比较；
20.判断输入值是否在(n, m)区间；
21.输入字符长度限制(可按字节比较)；
22.对于具有相同名称的单选按钮的选中判断；
23.限制具有相同名称的多选按钮的选中数目；
24.自定义的正则表达式验证；
25.文件上传格式过滤(1.04)
运行环境(客户端)：
在Windows Server 2003下用IE6.0+SP1和Mozilla Firefox 1.0测试通过；
在Lunix RedHat 9下的Netscape测试通过；

对于客户端的表单验证，这个基于JavaScript编写的Validator基本上都可以满足，具体可以下载CHM文件：Validator.CHM下载

示例：

运行代码框

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

更新历史：

1.01
修正对12月份的日期验证(感谢flylg999)

1.03
修正Range验证类型时将数字当字符串比较的bug(感谢cncom和xtlhnhbb)
修正日期验证(感谢Papsam)
增加Username验证类型
增加对Phone验证类型时支持分机号

1.04
增加文件格式的过滤，用于上传时限制上传的文件格式

1.05
增强对身份证号码的验证

[PHP]版
代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

[ASP]版代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

表单的验证 Validator
翔的窝窝
11-22 679
  表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。   Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个
JS验证(网页设计中表单数据的验证)
紫竹铃
06-25 3224
/***************************************************************************************************************************************************************************************把以下2个文件放在同一目录下
表单验证Validator V4.0（html文件）
03-07
表单验证Validator V4.0（html文件），表单验证Validator V4.0（html文件）
表单验证 Validator v4.0
xcgh的博客
12-26 309
旧版本讨论 ： http://bbs.blueidea.com/thread-1834871-1-1.html1.05 & ASP、PHP版：http://www.blueidea.com/tech/web/2004/2360.asp 4.0 功能特点 支持Ajax验证 实现密码安全度等级验证及显示 5种配置方式 6种消息提示模式 能避免网络原因未完全下载validator.js...
表单验证 Validator
子魚＠NET
09-05 1087
表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。 Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪
<template> <div class="vote-container"> <!-- 投票人信息 --> <div class="voter-info" v-if="voterName && voterIdCard"> <p>投票人：{{ voterName }}</p> <p>身份证：{{ formattedIdCard }}</p> </div> <!-- 投票统计信息 --> <div class="stats"> <div class="stat"> <h3>经理投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.A / 5) * 100 + '%' }"></div> </div> <p>{{ votes.A }} / 5</p> </div> <div class="stat"> <h3>厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.B / 5) * 100 + '%' }"></div> </div> <p>{{ votes.B }} / 5</p> </div> <div class="stat"> <h3>副厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.C / 15) * 100 + '%' }"></div> </div> <p>{{ votes.C }} / 15</p> </div> <div class="stat"> <h3>总票数</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (totalVotes / 25) * 100 + '%' }"></div> </div> <p>{{ totalVotes }} / 25</p> </div> </div> <!-- 被投票人列表 --> <div class="voters-grid"> <div v-for="voter in voters" :key="voter.id" class="voter-card"> <h4>{{ voter.name }}</h4> <p class="voter-id">ID: {{ voter.id }}</p> <div class="vote-options"> <button @click="castVote(voter, 'A')" :disabled="!canVote(voter, 'A')" :class="{ 'selected': voter.vote === 'A', 'disabled': !canVote(voter, 'A') }" > 经理 </button> <button @click="castVote(voter, 'B')" :disabled="!canVote(voter, 'B')" :class="{ 'selected': voter.vote === 'B', 'disabled': !canVote(voter, 'B') }" > 厂长 </button> <button @click="castVote(voter, 'C')" :disabled="!canVote(voter, 'C')" :class="{ 'selected': voter.vote === 'C', 'disabled': !canVote(voter, 'C') }" > 副厂长 </button> </div> </div> </div> <!-- 操作按钮 --> <div class="action-buttons"> <button @click="submitVotes" :disabled="totalVotes === 0 || isSubmitting">提交投票</button> <button @click="resetVotes" :disabled="isSubmitting">重置投票</button> </div> </div> </template> <script setup> import { ref, reactive, computed } from 'vue'; import { useRoute } from 'vue-router'; import { onMounted } from 'vue' const voters = ref([]); //候选人 // onMounted生命周期钩子 onMounted(async () => { // 从sessionStorage获取投票人信息并立即清除 const voterInfo = sessionStorage.getItem('voterInfo'); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; sessionStorage.removeItem('voterInfo'); } // 加载候选人数据 voters.value = await fetchCandidates(); }); // 获取路由信息 const route = useRoute(); // 添加用于存储投票人信息的变量 const voterName = ref(''); const voterIdCard = ref(''); // 格式化身份证显示（安全脱敏） const formattedIdCard = computed(() => { if (!voterIdCard.value) return ''; // 显示前6位和后4位，中间用*代替 return voterIdCard.value.substring(0, 6) + '******' + voterIdCard.value.substring(voterIdCard.value.length - 4); }); onMounted(() => { // 从sessionStorage获取数据并立即清除 const voterInfo = sessionStorage.getItem('voterInfo'); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; // 关键：立即清除存储防止数据残留 sessionStorage.removeItem('voterInfo'); } }); //获取候选人明细 const fetchCandidates = async () => { try { const response = await fetch('/api/wechat/getInvestigate', { method: 'POST', body: JSON.stringify({ id: '9', dcl: '123' }) }); const result = await response.json(); if (!result || !result.root) throw new Error('无效API响应'); // 提取候选人数据 const candidateArray = []; let idCounter = 1; // 自增计数器,名称序号 result.root.forEach(rootItem => { if (!rootItem.childEntList) return; rootItem.childEntList.forEach(candidate => { if (!candidate.dcbt || !candidate.dcxbt) return; candidateArray.push({ originalid: candidate.dcbt, name: candidate.dcxbt, vote: null, id:idCounter++, }); }); }); return candidateArray; } catch (error) { console.error('获取候选人失败:', error); return []; // 返回空数组保持安全 } }; // 投票统计 const votes = reactive({ A: 0, B: 0, C: 0 }); // 计算总票数 const totalVotes = computed(() => { return votes.A + votes.B + votes.C; }); // 投票方法 const canVote = (voter, type) => { // 情况1：用户取消当前选择的类型（总是允许） if (voter.vote === type) return true; // 情况2：用户从其他类型转换到当前类型 if (voter.vote && voter.vote !== type) { if (type === 'A' && votes.A >= 5) return false; if (type === 'B' && votes.B >= 5) return false; if (type === 'C' && votes.C >= 15) return false; } // 情况3：用户首次投票 if (!voter.vote) { if (type === 'A' && votes.A >= 5) return false; if (type === 'B' && votes.B >= 5) return false; if (type === 'C' && votes.C >= 15) return false; if (totalVotes.value >= 25) return false; } return true; }; // 投票方法 const castVote = (voter, type) => { // 如果已投票且点击相同类型，取消投票 if (voter.vote === type) { voter.vote = null; votes[type]--; return; } // 如果之前有投票，先取消 if (voter.vote !== null) { votes[voter.vote]--; } // 投新票 voter.vote = type; votes[type]++; }; //投票人信息 // 添加投票人信息数据模型 const voterInfo = reactive({ name: '', idNumber: '' }); // // 添加基本信息验证 // const isValid = computed(() => { // return voterInfo.name.trim() !== '' && // voterInfo.idNumber.trim() !== '' && // /^\d{17}[\dXx]$/.test(voterInfo.idNumber); // }); // 提交投票 // 防止重复提交 const isSubmitting = ref(false); // 提交投票到API const submitVotes = async () => { // 防止重复提交 if (isSubmitting.value) return; isSubmitting.value = true; try { // 按接口规范构建JSON数据结构 const requestData = { requestName: activeSurvey.bt, // 调查标题 workflowId: activeSurvey.id, // 调查ID mainData: [ { fieldName: "bt", fieldValue: activeSurvey.bt }, { fieldName: "tprxm", fieldValue: voterName }, { fieldName: "tprsfz", fieldValue: voterIdCard }, { fieldName: "mb", fieldValue: voterIdCard.id }, { fieldName: "dclx", fieldValue: activeSurvey.dclx }, { fieldName: "tffs", fieldValue: activeSurvey.tffs }, ], workflowRequestTableRecords: selectedCandidates.map(candidate => { return { workflowRequestTableFields: [ { fieldName: "dcbt", fieldValue: candidate.originalId // 候选人的原始ID }, { fieldName: "dcxx", // 根据投票类型转换值：经理-17, 厂长-18, 副厂长-19 fieldValue: candidate.voteType === '经理' ? 17 : candidate.voteType === '厂长' ? 18 : 19 } ] }; }) }; // 发送POST请求 const response = await fetch('/api/wechat/addInvestigateWorkflow1', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestData) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); alert('投票提交成功！'); // console.log('API响应:', result); // 提交成功后重置表单 // resetVotes(); // 存储已投票标识 localStorage.setItem('voted_' + voterIdCard.value, 'true'); } catch (error) { console.error('提交失败:', error); // 检查是否已投票错误（假设后端返回409状态码） if (error.response?.status === 409) { alert('您已投过票，无法重复提交'); } else { alert('投票提交失败，请重试'); } } finally { isSubmitting.value = false; } }; // 重置投票 const resetVotes = () => { if (confirm('确定要重置所有投票吗？')) { voters.value.forEach(voter => { voter.vote = null; }); votes.A = 0; votes.B = 0; votes.C = 0; voterInfo.name = ''; voterInfo.idNumber = ''; } }; </script> <style scoped> /* 移动端垂直布局 */ @media (max-width: 480px) { .input-group { flex-direction: column; } } /* 平板/桌面端水平布局 */ @media (min-width: 768px) { .input-group { flex-direction: row; } } .vote-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .stats { display: flex; justify-content: space-between; margin-bottom: 30px; background: #f5f7fa; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .stat { flex: 1; text-align: center; padding: 0 15px; } .progress { height: 20px; background: #e0e0e0; border-radius: 10px; margin: 10px 0; overflow: hidden; } .progress-bar { height: 100%; background: #3498db; transition: width 0.3s; } .voters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .voter-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; } .voter-card:hover { transform: translateY(-5px); } .voter-id { color: #777; font-size: 0.9rem; margin-bottom: 15px; } .vote-options { display: flex; justify-content: space-between; } .vote-options button { flex: 1; margin: 0 5px; padding: 8px 0; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .vote-options button:not(.selected):hover { opacity: 0.9; transform: scale(1.05); } .vote-options button:first-child { background: #ff6b6b; color: white; } .vote-options button:nth-child(2) { background: #4ecdc4; color: white; } .vote-options button:last-child { background: #ffd166; color: white; } .selected { border: 2px solid #2c3e50 !important; font-weight: bold; box-shadow: 0 0 2 rgba(61, 60, 60, 0.5); } .disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .action-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 20px; } .action-buttons button { padding: 12px 30px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.2s; } .action-buttons button:first-child { background: #3498db; color: white; } .action-buttons button:first-child:disabled { background: #bdc3c7; cursor: not-allowed; } .action-buttons button:last-child { background: #e74c3c; color: white; } .action-buttons button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style>报错：提交失败: ReferenceError: activeSurvey is not defined at submitVotes (Vote.vue:261:1) at callWithErrorHandling (runtime-core.esm-bundler.js:199:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:1) at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:729:1) 是否是前一个页面传过来的数据我没有正确定义
最新发布
06-11
validator: (v) => ['id', 'bt'].every(k => k in v) } }); ``` --- #### 错误根本原因分析表 | **阶段** | **常见错误** | **解决方案** | |----------|-------------|-------------| | **声明阶段** | 变量...
表单校验 validator
weixin_55626351的博客
08-30 219
可以使form表单 进行动态提示 然后在 data 里 定义 rule, value , xmsbs 是 prop 对应的字段
表单验证validator
weixin_46176363的博客
12-15 903
//undefined 的时候不会触发表单验证 ''的时候会触发 code_pre_next_info: [{ required: true, validator: (rule: any, value:any, callback: Function) => { const message = '输入礼包数量需要大于0' const message2 = '必填' const validValue = value.filter((
Validator V4.0 (表单验证，内含程序及详细的说明文档)
04-01
支持Ajax验证，实现密码安全度等级验证及显示，5种配置方式，6种消息提示模式，能避免网络原因未完全下载validator.js时提交未经验证表单，避免变量名冲突 。已内含详细的帮助说明文档。
validator表单验证
12-18
validator表单验证validator表单验证validator表单验证
jQuery formValidator表单验证
08-19
非常强大的jQuery formValidator表单验证 一档在手 代码不愁
《使用Validator做SpringMVC的验证框架》教程源码（完整版）
06-06
《使用Validator做SpringMVC的验证框架》教程源码 教程地址： http://blog.csdn.net/devefx/article/details/51565139 http://blog.csdn.net/devefx/article/details/51567533 http://blog.csdn.net/devefx/article/details/51576672 http://blog.csdn.net/devefx/article/details/51595671
vue表单及遍历表单校验rules以及validator校验器的使用
热门推荐
m0_53206841的博客
04-25 4万+
为防止用户犯错，尽可能让用户更早地发现并纠正错误。 Element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。在data里配置要校验字段和校验规则：required:true；message:""不符合校验规则时的提示信息；trigger:""校验触发方式设置除此之外，我们还可以使用validator验证器.
validator验证
ljj123_的博客
04-26 590
1、validation在springmvc中的配置信息如下&lt;!--配置校验器--&gt; &lt;bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"&gt; &lt;!--hibernate--&gt; ...
通用表单验证formvalidator 后端验证
hudeyong926的专栏
07-03 2295
在使用formvalidator4.1.3 插件时 发现正常情况调用时没有问题的,但是我们的项目中需要把css 、js 之类的静态资源用单独的域名加载。那么问题就来了在 该插件中 有一段这样的程序 //读取主题对应的脚本 var scriptSrcArray = fv_scriptSrc.split('/'); var jsName = scriptSrcArray[scriptSrcArray.length - 1]; var themedir = fv_scriptSrc.replace(jsN..
2010.08.19——— 我佛山人 validator v4.0 详解
08-19 203
2010.08.19——— 我佛山人 validator v4.0 详解 首先，大致介绍一下： [b]1. 引入js和css[/b] [code="java"] [/code] [b]2. 写法的大体框架[/b] [code="java"]Validator.setup({ form : 'demo', configs : 'xml,attribut...
Javascript表单验证控件Validator v1.05发布
### Javascript表单验证控件Validator v1.05知识点概述 #### 1.Javascript表单验证的重要性 在Web开发中，表单验证是确保用户输入数据正确性、完整性和安全性的关键环节。良好的表单验证不仅可以提升用户体验，还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值