博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一步一步实现一个简单的表单校验框架一
阅读量:7076 次
发布时间:2019-06-28

本文共 2000 字,大约阅读时间需要 6 分钟。

hot3.png

      只要是做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>

具体的校验逻辑实现放在上。

转载于:https://my.oschina.net/ubuntuvim/blog/372010

你可能感兴趣的文章
10.6 监控io性能;10.7 free;10.8 ps;10.9 查看网络状态;10.10 抓包
查看>>
delegate的用法
查看>>
Ubuntu <2TB sdb preseed示例
查看>>
Android开发之旅:组件生命周期(二)
查看>>
使用LVS+NAT搭建集群实现负载均衡
查看>>
LVM 磁盘分区扩容
查看>>
mysql5.6之key_buffer_size优化设置
查看>>
查看Linux服务器网卡流量小脚本shell和Python各一例
查看>>
Linux TC的ifb原理以及ingress流控
查看>>
AgileEAS.NET之敏捷并行开发方法
查看>>
Java源码分析系列之ArrayList读后感
查看>>
性能测试之手机号码python生成方式
查看>>
统计数据库大小的方法
查看>>
PHP递归遍历文件夹
查看>>
用户系列之五:用户SID查看之终结版
查看>>
ubuntu 11.10下载和编译Android源码
查看>>
千兆级LTE的一小步,5G之路的一大步
查看>>
跟我一起写 Makefile(一)
查看>>
管理日志-原创理论工具--技能方格图
查看>>
MPLS TE第一步:创建基本TE隧道
查看>>