表单检验的超级方便的方法

最新推荐文章于 2022-10-20 22:25:04 发布
最新推荐文章于 2022-10-20 22:25:04 发布
阅读量1.6k 收藏
点赞数
分类专栏： Web Development 文章标签： function coldfusion input javascript date 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengwei007/article/details/272272
版权
http://www.waynedeng.com/blog/showlog.asp?cat_id=25&log_id=494
受coldfusion的影响，想出了这样一个检验表单的方法：
注意红色标记出来的部分！是不是超直观？完整代码在这里下载 js_check.rar

以下是代码片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript" SRC="js_check.js"></SCRIPT>
</head>

<body>
<form action="" onSubmit="return pub_valuecheck(this);" method="post">
    数字测试：<input type="text" name="textfield" required="true" message="这里要填数字" datatype="number">
    <br>
    <br>
 长度测试：<textarea name="textfield1" required="true" message="长度不能超过2" maxlength="2"></textarea>
    <br>
    <br>
 正则表达式测试：<input type="text" name="textfield2" required="true" message="email格式不正确" RE="/w+@((/w+[.]?)+)">
    <br>
    <br>
   日期测试（dd/mm/yyyy）：<input type="text" name="textfield3" required="true" message="这里要填日期" datatype="date">
    <br>
    <input type="submit" name="Submit" value="Submit">
</form>

<script language="javascript">
function Checkform(){
//其它的检验在这里完成！
 return true;
}
</script>
</body>
</html>


js_check.js

以下是代码：
//js_auto_check  Create by Wayne Deng http://www.waynedeng.com/blog
var errmsg='';
function pub_valuecheck(obj){
 errmsg='';
 prv_validcheck(obj.children);
 if(errmsg.length>1) alert(errmsg);
 return errmsg.length<=1&&Checkform();;
}

function prv_validcheck(obj){
 var message='';
 for (var i=0;i<obj.length;i++){  
  if(obj[i].style.display=='none') continue;
  
  var value='';
  if(obj[i].tagName=='INPUT'||obj[i].tagName=='SELECT'||obj[i].tagName=='CHECKBOX'||obj[i].tagName=='RADIO')
   value=obj[i].value;
  if(obj[i].tagName=='TEXTAREA')
   value=obj[i].innerHTML;
  
  message='';
  if (obj[i].message!=undefined) message=obj[i].message;
  
  if (obj[i].required!=undefined&&obj[i].required=='true'&&value.length==0){
   addmsg(obj[i].caption + ' is required!/n');
  }
  if (obj[i].datatype!=undefined&&value.length>0){
   if (obj[i].datatype=='number'){
     if(!(/^/d+$/.test(value)))
      addmsg (obj[i].caption + ' should be a number!/n');
   }
   if (obj[i].datatype=='date'&&!pub_isDateTime(value)){
    addmsg (obj[i].caption + ' should be a date (dd/mm/yyyy)!/n');
   }
  }
  
  if (obj[i].maxlength!=undefined&&value.length>obj[i].maxlength){
   addmsg(obj[i].caption + ' is to long (' + obj[i].maxlength + ' max)!/n');
  }
  if (obj[i].RE!=undefined&&value.length>0){
   re = new RegExp(obj[i].RE);
   if(!re.test(value))
    addmsg (obj[i].caption + ' format error!/n');
  }
  prv_validcheck(obj[i].children);
 }
 
 function addmsg(msg){
  if (message=='') errmsg=errmsg +msg; else errmsg=errmsg+message+'/n';
 }
}

function pub_isDateTime(chkValue){
 var rn = chkValue.match(/(/d{2})//(/d{2})//(/d{4})/);
 if (rn==null) return false;
 var d = new Date(rn[3], rn[2]-1, rn[1]);
 return (d.getFullYear()==rn[3]&&(d.getMonth()+1)==rn[2]&&d.getDate()==rn[1]);
}

dengwei007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自己写的超级无敌表单验证，错过后悔
07-20
5. **可扩展性**：框架设计允许添加新的验证方法，方便未来功能升级。 6. **错误处理**：统一的错误处理机制，方便收集和处理用户输入的异常情况。 7. **兼容性**：考虑到不同的浏览器环境，验证库可能已经做好了...
渗透入侵\超级SQL注入工具 SSQLInjection V1.0.zip
07-15
"超级SQL注入工具 SSQLInjection V1.0"是一个专为此目的设计的工具，它帮助安全研究人员或黑客检测和利用SQL注入漏洞。 首先，我们来理解SQL注入的基本原理。在Web应用程序中，用户输入的数据通常会被拼接到SQL查询...
表单检验
weixin_45516375的博客
10-28 174
在form表单中如何确认必填项是否为空是一个问题 <form action="http://www.baidu.com" id="login"> <input id="name" placeholder="请输入用户名" /> <input id="passwd" type="password" placeholder="请输入密码"/> &...
form表单的检验
yjz764297625的博客
09-12 104
ElementById("selection").value); alert(document.forma.selection.value); if (document.forma.selection.value=="0") window.alert("请选择！"); return false; }
vue多表单校验
weixin_30889885的博客
05-09 166
转载于:https://www.cnblogs.com/lhy-555/p/10839628.html
多个表单验证的实现
weixin_42349568的博客
04-06 548
一，实现效果 这三个表单是独立的，需要在提交前验证其值的有效性。 二，实现代码 //上传表单 submitBtn(formName){ this.$refs[formName].validate((valid) => { if (valid) { this.handleBeforeSubmit() } else { return false } });
超级玛丽H5源码，超级玛丽H5源码
最新发布
04-28
开发者会使用JavaScript来控制`canvas`的绘图API，包括`fillRect`、`strokeRect`、`drawImage`等方法，创建游戏的视觉效果。 四、精灵与动画 在HTML5游戏中，"精灵"是指游戏中的可移动或交互的对象，如马里奥、敌人...
银带超级链接器
02-14
1. **自动内链**：该工具可以自动检测文本中的关键词，并将其转化为内部链接，引导用户浏览网站内的其他相关页面，提高用户停留时间。 2. **相关性分析**：通过算法分析页面内容，找出最相关的其他页面进行链接，...
基于cocos2Dx 3.0和vs2012 超级玛丽奥
12-25
Cocos2Dx提供了方便的资源加载和管理机制，如精灵表单（Sprite Sheets）、纹理 atlases 和音频文件。开发者可以通过这些机制轻松地加载和使用游戏资源。 六、运行与调试 在VS2012环境中，编译并运行项目后，"超级...
当一个页面有多个表单该如何校验
HQ\(^o^)/的博客
10-20 826
在项目中，我不喜欢一个文件中有太多行内容，因为查找起来比较麻烦，因此我特别喜欢拆分文件，就比如一个文件它里面嵌套者很多表格啊，表单啊，或者一些dialog弹框，我就喜欢把它们各自拆分，最后引入主文件就行，但是呢，谁曾想，有一天，我竟然要把它们放入同一个文件里o(╥﹏╥)o故事的开始，，我忘记了，我只记得，最开始，要我把所有的子文件的内容放置在主文件，不要进行拆分，虽说可以更加简洁的进行操作，值不用传过来传过去的。
多个form表单校验
初壹什伍
04-28 2021
多个form表单校验 场景：根据条件不同，在同一个页面中出现多个不同from时的校验以及数据的提交 解决办法：分别校验表单，每个表单校通过后 将表单多合一提交 校验表单部分： /** 校验表单 **/ formValidate(formRefs){ let objectList = []; let results = formRefs.map(formRef => new Promise((resolve, reject) => { f
Element多个表单验证
弑十四的博客
05-07 9088
最近刚开始接触饿了吗组件，各种还是挺好用的，不过也有一些使用在文档是没有说全的，网上也比较少案例，以下是一个多表单验证的Demo。 需求如下图：点击提交时候要对n个表单进行验证。
HTML5中表单验证的8种方法
teresa502的专栏
01-21 3万+
在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么？ 是一种优化。 之所以说表单验证是一种优化，是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面，设计表单验证是为了让W
表单的一些校验方法
weixin_45747619的博客
11-03 878
1、限制只输入整数和小数（自定义校验） <avue-form ref="form" :option="nodeBOption" v-model="nodeBData"> <template slot-scope="scope" slot="sectorInitAngle"> <div class="soopp"> <label for="" style="color: #606266; font-size:
validateField方法对部分表单字段进行校验
热门推荐
菜鸟黑一枚
12-20 7万+
<template> <div class="content-container developer-container dev-register-container"> <nav-bar :address="address" :title="title" :register="true"> </n...
大量表单字段验证
凡事预则立，不预则废
04-18 1920
第一次在页面中，需要处理表单很多字段的校验，包括非空以及字段内容的验证，该字段可能必须是数字或者字母。1 配置通用的验证方法，可适用于所有的表单验证。方法都是传入一个input控件的jquery对象，如果有其他验证参数，需要依次传入。general-rule.jsvar isInArray = function (arr, value) { for (var i = 0, len =
HTML表单基础：Image控件与表单提交方法
GET方法是最常见的，它将表单数据附加到URL后面，但受到URL长度限制（通常为8,192个字符），不适合处理大量数据或敏感信息，因为这些信息会暴露在浏览器的历史记录和地址栏中。 POST方法则是在HTTP请求正文中包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值