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

2019独角兽企业重金招聘Python工程师标准>>>

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