日常开发工作中,经常用到表单填写时的录入验证,像什么电话、邮箱之类的,或是不能为空、限定录入长度、数值大小等等。技术并不复杂,但是频次挺高,网上也有很多相关代码或是插件可用,甚至有些宣称“一行代码实现验证”,我也觉得嫌麻烦。于是就动手写了一个,刚开始只是自己用,要求不高。第一版已经是很久之前了,后来慢慢优化,从项目中独立出来,作为一个单独的Javascript插件来使用。自己感觉还不错,拿出来给大家分享。
主要功能:
1、支持的验证:
非空验证、字符长度验证、数值区间验证、输入是否相同、不等于某值、数据类型验证(支持和与或运算符)、文件类型限制、首尾字符验证、正则表达式验证 
2、其它功能:
分组验证(分组可以交叉验证)、验证方式(提交验证或失去焦点验证)、提示信息设置(可出现在上下左右)、Ajax异步验证 
 
 示例:
我的基本思路是通过设置控件的属性来实现,无需编写Js代码,当然,如果需要Ajax验证,例如验证账号是否已经注册、密码是否正确,需要异步调用服务器端代码,那就得写一些Js代码了,不过也很简单。
代码示例(仅上图中部分代码):
<form onsubmit="alert('验证成功');return false;">
<p>姓名:<input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" alt="限2至4个中文字/符"><span>(限中文)</span>
</p>
<p> <input type="submit" name="button" class="button" value="验证表单" verify="true"/> </p>
</form>

代码说明:

按钮上添加verify="true",即该按钮支持验证动作,会验证form表单所有带验证属性的控件,如果验证不通过,则提示alt的消息框,并阻止form表单提交。

使用说明:

1、非空验证

<input name="" type="text" nullable="false"/>

2、字符长度验证

<input name="" type="text" lenlimit="5"/>(最长5个字符)

<input name="" type="text" lenlimit="5-10"/>(最少5个字符,最多10个字符)

3、数值区间验证

<input name="" type="text" numlimit="5"/>(数值不得大于5)

<input name="" type="text" numlimit="5-10"/>(数值介于5-10之间)

指定某个录入控件为设定值

<p> 产品价格:
<input name="prise" type="text" value="10" datatype="uint"/>
元 </p>
<p>最低优惠:
<input name="min" type="text" value="12"
datatype="uint" numlimit="{prise}"/>(优惠价不可以超过产品价格)
</p>
<p> 最大优惠:
<input name="max" type="text"
numlimit="{min}-{prise}"/>(最大优惠大于最低优惠,但不可以超过产品价格)
</p>

 4、输入是否相同

<input name="pw1" type="text"/>

<input name="pw2" type="text" sametarget="pw1"/>(与name="pw1"的控件录入相同)

5、不等于某值

<select name="select" id="select" novalue="|1|2" alt="请选择专科或以上学历">
<option value="">--请选择--</option>
<option value="5">硕士</option>
<option value="4">本科</option>
<option value="3">专科</option>
<option value="2">中学</option>
<option value="1">小学</option>
</select>

6、数据类型验证

<input name="tm" type="text" datatype="uint"/> 设置datatype="uint",要求录入正整数。

可以验证的数据类型包括:chinese 中文、user 账户、uint 正整数、number 数字、float 浮点数、tel 电话、mobile 移动电话、zip 邮编、email 电子邮箱、idcard 身份证、qq 号、url 网址。

满足任一条件(即或运算):datatype="tel|mobile",只要是电话(固话或手机号)都通过验证

满足全部条件(即和运算):datatype="uint&zip",既是数字,且是邮编。

7、文件类型限制

<input name="" type="file" fileallow="jpg|png"/>,只允许上传jpg与png图片

<input name="" type="file" filelimit="exe|com|bat|js"/>,禁止上传可执行文件

8、首尾字符验证

<input name="" type="text" begin="http|https"/>(必须是网址)

<input name="" type="text" end="@qq.com"/>(必须是qq邮箱)

9、正则表达式验证

<input name="" type="text" regex="\d+"/>(全部为数字)

默认为表达式增加^前缀和$后缀,也就是说,默认是要求全字匹配。

10、分组验证

如下,按钮与录入控件的group的值一致,当点击按钮时,即实现验证。

<input type="text" datatype="email" nullable="false" group="a"/>

<input type="submit" name="button" class="button" value="验证表单" verify="true" group="a" />

分组可以交叉验证,如

<p>电话:
<input type="text" datatype="mobile|tel" nullable="false" group="a|c">(同时属于a组和c组)
</p>
<p>
邮箱:<input type="text" datatype="email" nullable="false" group="b|c" />(同时属于b组和c组)
</p>
<input type="submit" name="button" class="button" value="验证A组和B组" verify="true" group="a|b"/>
<input type="submit" name="button" class="button" value="验证B组和C组" verify="true" group="b|c"/>

11、验证方式

默认的验证方式是点击按钮后按顺序逐个验证所在form表单内的所有控件,如果验证全部通过则触发form的submit事件,不通过则中断。

在实际工作中,用户希望录入后即验证,即控件失去焦点后立即进行验证,不必统一提交时验证。

可以通过设置form表单的patter属性为focus(默认为submit),即焦点模式。

12、提示信息样式设置

提示信息显示在右侧,<input name="" type="text" nullable="false" place="right"/>

设置提示信息的前景色(字体颜色)与背景色,<input type="text" datatype="email" nullable="false"bgcolor="#33f" fgcolor="#FF9"/>

速查表

 
属性 参数 默认值 说明
nullable false或true true 是否允许为空,默认是允许,即为true。当为false时,控件右侧显会显示红色星号。(如果设置star='false'则不显示)
star false或true true 是否允许显示红色星号,为false时不显示。
lenlimit

整数数值,如

lenlimit="5"

lenlimit="5-10"

 

lenlimit="5",录入字符最长不得超过5个字符,包括5个

lenlimit="5-10",录入字符长度为5至10个字符,包括5与10

numlimit

整数数值,如

numlimit="5"

numlimit="5-10"

目标控件名称,如

numlimit="{ctlname}"

 

numlimit="5",录入数值最大不得超过5,包括5个

numlimit="5-10",录入5至10之间的数值,包括5与10

numlimit="{ctlname}",录入数值不超过控件名称为ctlname的值

sametarget 要比较的控件的name值   最常见的应用场景就是密码输入,此处填写要比较录入值的控件的name
novalue 

任意值,

支持多个值

用|分隔

  要求控件的值不得等于某些值,如novalue="1|2",即不得等于1和2。
datatype chinese 中文
user 账户
uint 正整数
number 数字
float 浮点数
tel 电话
mobile 移动电话
zip 邮编
email 电子邮箱
idcard 身份证
qq 号
url 网址
  验证录入的数据是否符合要求的数据类型。

满足任一条件:datatype="tel|mobile",只要是电话(固话或手机号)都通过验证

满足全部条件:datatype="uint&zip",既是数字,且是邮编。

fileallow

文件扩展名

多个名称用|分隔

  允许上传的文件类型。最常见的应用场景是文件上传
filelimit

文件扩展名

多个名称用|分隔

  禁止上传的文件类型。最常见的应用场景是文件上传
begin

任意字符

多个值用|分隔

  限定必须以某值开头,常见的应用场景,如录入网址,可以http://开头或https://开头。如begin="http|https"
end

任意字符

多个值用|分隔

  限定必须以某值结尾,end="@qq.com|@163.com",必须是qq邮箱或163邮箱
group

任意字符

多个值用|分隔

all验证所有

 

分组验证。控件与按钮设置一样的值,当点击按钮时即验证相关控件,多个组可以用|线分隔。

支持组的交叉验证。

如果按钮上设置group="all",则验证form中所有控件

patter sumbit或focus sumbit

控件验证方式,sumbit是提交时验证。fcocus是失去焦点时验证,(更加即时)

该属性可以设置在控件上,也可以设置在form标签

place top、bottom、left、right bottom

提示信息显示的位置,默认是在下方,当设置为right时在右侧。

该属性可以设置在控件上,也可以设置在form标签

bgcolor 颜色值 红色

提示信息的背景色。

该属性可以设置在控件上,也可以设置在form标签

fgcolor 颜色值 白色

提示信息的前景色,即字体颜色。

该属性可以设置在控件上,也可以设置在form标签

Js表单验证控件(使用方便,无需编码)-01使用说明的更多相关文章

  1. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  2. Js表单验证控件

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  3. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  4. 表单验证控件Verify.js

    自己工作常用到表单录入验证,就顺手写了一个验证控件,刚开始写得很烂.多年后翻出来,又优化了一下,增加了一些功能.拿出来分享分享. 主要功能就是表单的录入验证. * 1.当录入框必填时,在控件后生成红色 ...

  5. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  6. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  7. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  8. js表单验证工具包

    常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...

  9. SNF开发平台WinForm-表单验证控件-通用

    CS程序也能做到像BS程序一样的验证效果,如下: 1.验证控件的展示 校验时如果不符合验证条件的控件,会在控件上显示较显眼的图标. 当出现不符合验证的控件时,鼠标悬浮会显示自定义的提示信息. 如:输入 ...

随机推荐

  1. 在阿里云CentOS 7创建swap分区

    https://blog.tanteng.me/2016/03/aliyun-centos-7-swap/ Centos 系统swap虚拟内存添加与删除配置

  2. 使用CentOS Linux Bridge搭建Vxlan环境

    一. 基础环境使用VmWare虚拟两台Linux机器.CentOS 7,Linux内核如下:4.5.3-1.el7.elrepo.x86_64如果内核版本太低,是不支持VxLan的.可以使用一下命令进 ...

  3. 在 CentOS7.0 上搭建 Chroot 的 Bind DNS 服务器

    BIND(Berkeley internet Name Daemon)也叫做NAMED,是现今互联网上使用最为广泛的DNS 服务器程序.这篇文章将要讲述如何在 chroot 监牢中运行 BIND,这样 ...

  4. mysql-connector-java 6.x 时区设置

    最近遇到了一个问题,java从mysql从读出的时间与本地时间有14个小时的时间差,经查证.测试解决了此问题,在此总结一下: jdbc:mysql:&allowMultiQueries=tru ...

  5. intellij idea maven springmvc 环境搭建

    1.   新建maven 工程 intellij idea 默认已经集成了maven, 直接点击下一步 2.   配置文件修改 pom.xml 文件 <?xml version="1. ...

  6. 标准Http协议的六种请求方法详解

    标准Http协议支持六种请求方法,即: 1.GET 2.POST 3.PUT 4.Delete 5.HEAD 6.Options 但其实我们大部分情况下只用到了GET和POST.如果想设计一个符合RE ...

  7. 手把手教你用.NET Core写爬虫

    写在前面 自从上一个项目58HouseSearch从.NET迁移到.NET core之后,磕磕碰碰磨蹭了一个月才正式上线到新版本. 然后最近又开了个新坑,搞了个Dy2018Crawler用来爬dy20 ...

  8. 正"/" 和 反"\"的区别?

    反斜杠"\"是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点.就是说,除了程序设计领域外,任何地方你都不应该有使用反斜杠的时候,请永远使用正斜杠"/" ...

  9. 记录一个 spring cloud 配置中心的坑,命令行端口参数无效,被覆盖,编码集问题无法读取文件等.

    spring cloud 配置中心 结合GIT , 可以运行时更新配置文件.发送指令让应用重新读取配置文件. 最近在测试服务器实现了一套,结果CPU 实用率暴增,使用docker compose启动 ...

  10. 生活常用类API调用的代码示例合集:邮编查询、今日热门新闻查询、区号查询等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 邮编查询:通过邮编查询地名:通过地名查询邮编 今日热门新闻查询:提 ...