文档章节

一步一步实现一个简单的表单校验框架一

ubuntuvim
 ubuntuvim
发布于 2015/01/27 01:29
字数 861
阅读 88
收藏 1

      只要是做bs系统,特别是做信息系统的估计都会遇到过表单校验的问题吧?实习工作一年多了,总结下自己开发过程个之中用到的校验框架,突发奇想,自己也想试着开发一个简单的表单校验框架。


想法:表单的校验无非就是校验是否为空,长度是否符合程序要求,输入的内容是否符合程序的要求等等。所以既然是这样的那就定一个自己的属性,只要input、textarea等常用标签包含了自定义的这个属性就在表单提交的时候就进行校验。

如 <input type="text" name="username" id="usernameId"  ckFeild="required"placeholder="请输入您的用户名" title="请输入您的用户名"/>

注意红色部分,这个就是自定义的属性。还有一些其他的定义如下

validation-failed ---- 验证失败

required ---- 请输入值  

validate-number ---- 请输入有效的数字 

validate-digits ---- 请输入数字  

validate-alpha ---- 请输入英文字母  

validate-alphanum ---- 请输入英文字母或是数字,其它字符是不允许的  

validate-email ---- 请输入有效的邮件地址,如 username@example.com  

validate-url ---- 请输入有效的URL地址  

validate-ip ---- 请输入正确的IP地址

min-value ---- 最小值为%s

max-value ---- 最大值为%s

min-length ---- 最小长度为%s,当前长度为%s

max-length', '最大长度为%s,当前长度为%s

int-range ---- 输入值应该为 %s 至 %s 的整数

float-range ---- 输入值应该为 %s 至 %s 的数字

length-range' , '输入值的长度应该在 %s 至 %s 之间,当前长度为%s

equals ---- 两次输入不一致,请重新输入

less-than ---- 请输入小于前面的值

less-than-equal ---- 请输入小于或等于前面的值

validate-id-number ---- 请输入合法的身份证号码

validate-chinese ---- 请输入中文

validate-phone ---- 请输入正确的电话号码,如:010-29392929,当前长度为%s

validate-mobile-phone ---- 请输入正确的手机号码,当前长度为%s

validate-zip ---- 请输入有效的邮政编码

validate-qq ---- 请输入有效的QQ号码

 

使用方式: 

<input ckFeild="validate-qq" />效果:非必填,当输入框不为空的时候才校验,并且校验输入的内容是否是一个合法的QQ。

<input ckFeild="required validate-qq" /> 效果:必填,校验这个输入框的值是否是一个QQ号码

不同的校验属性可以组合使用:如<input ckFeild="required validate-digits validate-qq" /> 效果:必填,必须是数字,必须是合法的QQ号码。


上述这些定义参考了Rapid-framework,在此对其作者表示感谢。


准备阶段

1. jquery 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

2. poshytip

http://vadikom.com/demos/poshytip/


初步实现

新建一个html页面,输入如下内容;

<form action="" id="myForm">

username:

<input type="text" name="username" id="usernameId" 

           ckFeild="required" placeholder="请输入您的用户名" title="请输入您的用户名"/>

<br><br><br>

password:

<input type="password" name="password" ckFeild="required" placeholder="请输入您的密码" title="请输入您的密码" />

<br>

<input type="submit" value="save" id="submitBtn"/>

<br>

</form>


具体的校验逻辑实现放在这篇文章上。


© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
表单数据验证方法(二)——ASP.NET后台验证

  昨天写了一下关于如何在前台快捷实现表单数据验证的方法,今天接着昨天的,把后台实现数据验证的方法记录一下。先说明一下哈,我用的是asp.net,所以后台验证方法也是基于.net mvc来做的...

CherishTheYouth
2018/09/04
0
0
一个 React Form 组件的重构思路

本文发布于 我的博客 最近对团队内部 React 组件库(ne-rc)中的 Form 组件进行了重构,记录一下思考的过程。 一些前置定义: 名词 定义 表单 Form 组件 子表单 嵌套在 Form 下面的类似 Inpu...

moqiao
2017/03/17
0
0
一步一步教你用shiro——2配置并自定义realm

一步一步教你用shiro——1引入shiro框架 一步一步教你用shiro——2配置并自定义realm 一步一步教你用shiro——3配置并自定义sessionManager 一步一步教你用shiro——4配置并自定义sessionDa...

肥肥小浣熊
2018/04/30
0
0
(是时候开发属于自己的插件了)数据校验插件开发指南

在看完了《JavaScript插件编写指南》之后,最激动人心的时刻到了!我们着手开始做一个数据校验插件吧! 首先,我们先初始化一个HTML用来作为校验的数据来源 首先初始化插件 因为我们是依赖而...

梁音
2018/08/28
0
0
成为更优秀的程序员:退后一步看问题

请把下面的[客户]、[老板]或其它任何东西换成你想要的名称。 一天,在工作中… Bug #3890 来自客户: 有个程序出现了错误,程序提示说“SpeedCalculator::compute()里出现了除零情况”。 请尽...

oschina
2014/08/05
6.3K
34

没有更多内容

加载失败,请刷新页面

加载更多

面试爱奇艺,竟然挂在第5轮……

今天给大家分享我曾经在爱奇艺的面试,过程还是比较有意思的,可以给大家一些参考 <br> 聊骚阶段 嗲妹妹:你好,我是爱奇艺的HR,我们正在招聘运维开发岗位,请问您最近有在看工作机会吗? ...

上海小胖
今天
5
0
Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
4
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部