表单交互是我认为最恶心的地方~最近公司要做一个校园行的表单用来收集学生信息。一开始以为表单需要收集的字段是写死在页面里面的比如收集学生的,姓名,性别,年龄,爱好等。没想到开会的时候根据市场部的需求,表单要做成“活”的。后台可以灵活配置
1.页面里面input[type="text"]的比如姓名,家庭,地址,专业等,这些text文本输入框的个数和name值都是灵活多变的。
2.页面里面的input[type="radio"]和input[type="checkbox"]的个数都是不固定的。
3.每个字段的必填与否都是后台可配置的
4.每个字段的最大长度和最小长度后台都是可配置的
5.有些字段的正则还需要验证比如常见的手机邮箱
6.根据错误信息的不同还要提示不同的错误信息,必输项,最大长度,最小长度,正则校验等。
7.最后还要实现一个哪里错了,就要定位到哪里,还要是出现错误的文本框里面获得焦点。
8.这个表单页面只能通过微信扫码登陆进入和官网还有数据交互。安卓微信他妈的缓存又恶心的清楚不掉,再加上公司网络环境有问题,一会在内网一会在外网。测试一直通不过还被老大各种嫌弃。心情真是糟透了。
9.这仅仅是我能描述清楚的一部分,这个表单的复杂程度,包括渲染数据,客户端校验,提交表单,页面特效。是我做过的最复杂的一个表单了,真是恶心至极。主要是自己经验不足,能力偏弱的原因。我得上传一张图片来纪念下这个恶心的表单。
- jquery atter 和prop的区别(关于两者的区别,网上的都是大同小异,这里就不重复了,只是告诉自己要避免这些坑。这是我找到解释的比较好的,当然jquery 手册里面也有例子,只是解释的不是很清楚而已)
第一:脚本之家 http://www.jb51.net/article/62308.htm
第二:百度知道 http://zhidao.baidu.com/link?url=iBBZtANsEB4hQdd_RQeVPYJL_JNdFJDnCQ9QtpWgjlocaQEn3pIzQKOeMT1N5jnFx7aMwWFEo18RRkwzdSXLtGpPuk5uqSMnWDbVOif8LRC
- ajax表单提交我们常见的都是post请求去往url后面追加参数a=1&b=2,通过表单序列化
$("form").serialize()
可以帮我们快速的做这件事,不用我们手动的去拼。当然这是建立在传递的时候不需要其他变量的时候。这次没有这么简单,这次提交到后台的url串后面是这样的一个json字符串:'{"name":"lz","level":"high","age":25,"another":{"school":"qh"},"perplex":[{"ni":"wb"},{"ta":"zhuang"}]}'。我去,我还要各种循环,里面套循环的去往这个json里面去动态的添加属性。首先是外面这个大的{},里面包的属性名字为another的字段(注意这个字段是个对象)又可以是多个,同理属性名字为perplex的字段(数组里面套对象)又可以是多个当然需要循环,推荐用$.each()和$().each()。我们渲染的时候都是从后台拿这种数据结构,要什么拿什么,现在反过来给后台计较这种结构的json串,就动态的添加属性,没啥。问题是添加完后是个object typeof的结果。后台说它要的是json字符串不要对象。这怎么办,不知道的原因是因为不知道有JSON.stringify(参数)这个方法,原生js封装ajax的时候对后台返回的json串我们要解析成对象才能用JSON.Parse(),现在反过来了,用JSON.stringify(参数)这个方法去转换。 - http://www.cnblogs.com/ningvsban/p/3660654.html(这篇文章讲的是JSON.stringify())的用法。