简单的前端表单验证-表单验证js 提交前验证

1990 年，Tim Berners Lee 发明了世界上第一个网络浏览器 WorldWideWeb。 1995 年，Brendan Eich 仅用了 10 天就完成了第一个版本的 Web 脚本语言（我们所知道的 JavaScript）的设计。 在那个网络条件和电脑设备都比较落后的年代，网页基本上都是静态的。 Web脚本语言的功能最初的想法只是为了能够在浏览器中完成一些简单的验证，比如表单验证。 因此，Web脚本语言的特点是：功能简单、语法简洁、易学易部署。 那个时代的网络应用程序是服务器端和轻客户端模型。 Web 开发人员专注于服务器端开发，同时兼顾浏览器端。 没有所谓的前端工程师。

2005年AJAX技术的出现让静态网页“动起来”，异步请求和局部刷新彻底改变了网页的交互方式。 同时，互联网的速度和个人电脑的普及为网站带来了更多的用户，用户对网站的需求也越来越多。 需求和技术的同步增长，使得早期服务端和轻客户端的天平向客户端倾斜，也就是从那个时候开始，出现了第一批全职前端工程师。 这些前端工程师相对于服务端工程师的优势主要体现在对交互和UI的敏感度和专业度上。 因此，第一批前端工程师中有很大一部分是设计师，这就导致前端工程师有一个非常不相称的称呼：美术。 但不可否认的是，第一批前端工程师主要负责CSS和HTML开发。 虽然有AJAX技术，但是受限于JavaScript引擎的性能，浏览器端的功能逻辑还是很简单的。

2008年，谷歌推出了全新的JavaScript引擎V8，利用JIT（即时编译）技术解释和编译JavaScript代码，大大提高了JavaScript的性能。 随后，Netscape 的 SpiderMonkey 和 Apple 的 JavaScriptCore 也跟随 V8 加入了 JavaScript 引擎的性能追逐。 JavaScript引擎的性能提升使得很多早期无法在浏览器端实现的功能得以实现。 浏览器可以承载几千甚至几万行逻辑。 业界开始提倡REST（Representational State Transfer，具体状态转移）风格的Web服务API，以及SPA（Single PageApplication，单页应用）风格的客户端。 前端工程师承担了客户端交互、UI和逻辑的开发，工作职责进一步加重。

2009 年，Node.js 的问世在前端界引起了轩然大波。 Node.js 将 JavaScript 语言带入了服务器端开发领域。 迄今为止，业界已有多家企业将Node.js应用到企业级产品中。 尽管 Node.js 还不如 PHP 和 Java 等传统服务器端语言流行，但由其引发的“大前端”模式已经在 Web 开发领域蔓延开来。 Node.js对前端生态的推动和对同构开发的支持，是PHP、Java等语言所望尘莫及的。 “大前端”模式下的前端工程师，跨越了之前浏览器和服务端之间看似无法逾越的鸿沟，踏入了Web服务端开发领域。

由此可见，前端工程师的职责范围发生了翻天覆地的变化，那么前端工程师应该掌握哪些技能和职业素养呢？ 让我们一一介绍。

从最初的强调交互/UI、轻JavaScript开发模式，到对交互、UI、逻辑的把握，再到对“大前端”的服务端和客户端的全面掌控，工作内容和职责前端工程师不断扩充。 从前端工程师的发展历程中，我们可以总结出前端工程师的技能栈。

1. 硬技能——HTML/CSS/JavaScript

这三项，俗称“前端工程师三把刷子”，是前端工程师必须掌握的核心技能。 事实上，把 HTML/CSS 和 JavaScript 放在一起讨论是不合适的。 HTML和CSS作为标记语言，只能在浏览器环境或类似浏览器的环境中被识别和解析，因此可以认为是DSL（Domain Specific Language，领域特定语言）。 另一方面，JavaScript 在本质上与 HTML/CSS 不同。 虽然不像C++、Java等高级语言那样严谨，但本质上还是一种编程语言。 和其他编程语言一样，对于JavaScript来说，掌握它的语法和特性是最基本的。 但以上只是应用能力，最终考量的还是计算机系统的理论知识。 因此，数据结构、算法、软件工程等基础知识对于前端工程师来说同样重要，这些知识能够决定一个前端工程师的上限。

HTML/CSS/JavaScript 三者的统称，代表了前端工程师三个方面的能力。 三者是相互耦合的，不是独立的。 比如CSS要和HTML配合，JavaScript逻辑要借助HTML和CSS直观的展现给用户。 任何物品都是一棵巨大的技能树，可以细分为很多子技能。 对于HTML来说，需要掌握各个标签的合理使用和基本的Web API。 对于CSS，需要在了解各个属性工作模式的前提下综合使用，并给出合理的解决方案； 并且由于浏览器的差异简单的前端表单验证，您还必须掌握必要的黑客解决方案。 虽然这些hack方案最终都会被埋没在历史的尘埃中，但目前（2017年）我们依然无法回避兼容性问题。 对于JavaScript，和其他任何编程语言一样，除了要掌握基本的语法和基本的应用程序编程能力外，还必须具备良好的抽象能力和架构能力。

2. 软技能——用户体验

除了上面提到的“硬技能”，前端工程师还必须掌握一个“软技能”，那就是用户体验。

前端工程师的输出是直接面向用户的，良好的用户体验是一个web产品的基本要素。 这里的用户体验不是指交互方案和视觉设计，当然这些也是用户体验的一部分。 我们这里讨论的用户体验包括但不限于以下几点。

以上几点可以概括为两个字：性能。 如果说按时完成所有业务需求是“量”的保证，那么提升产品性能是“质”的保证，两者缺一不可。

JavaScript设计之初最经典的应用场景就是表单验证。 比如一个需要验证用户名和密码的表单，如果用户在没有输入任何内容的情况下点击了“发送”按钮，仍然会向服务器发送一个请求进行验证。 这在当今的网络技术中不算什么，但在上网速度慢、费用高的时代，成本是非常巨大的，用户必须等待服务器端处理才能得到反馈。 JavaScript在浏览器发送请求之前验证内容的合法性，避免了无效的请求，不仅减轻了服务器端的压力，节省了成本，还减少了用户的等待时间，提高了用户体验。 可见，JavaScript设计的初衷是将用户体验作为重要的考虑因素。

当今社会快节奏下，用户对产品的需求也趋于快：展示快，迭代快。 用户不希望下载新闻软件只是为了阅读一条新闻，他们希望打开网站并快速查看。 Web产品本身就有快的基因，性能优化的最终目的是保证“足够快”。 因此，前端工程师不仅需要熟练使用基本的开发技能，还必须具备性能优化的意识和技能。

你可能会有疑问：学习能力不是一种软技能吗？ 这是因为学习能力是任何岗位都必须具备的软技能之一，并不是前端工程师专属的软技能。

3. 扩展技能-Node.js

将 Node.js 定位为扩展技能，并不是指 Node.js 本身，而是指以 Node.js 为代表的 Web 服务器端知识。 掌握Web客户端的相关知识是前端工程师的基本要求，缺少的是对Web服务器的了解。 虽然不是每个前端工程师都是“大前端”，而且前端工程师写不熟悉的服务端逻辑也不是很合适，专业的事情应该由专业的人来做，但这并不代表前端工程师不需要熟悉服务器端的理论知识。 了解一个Web应用的前后台工作流程和整体架构模型，有助于前端工程师编写更合理的客户端逻辑，及时定位产品问题。

综上所述，一个合格的前端工程师应该掌握的技术栈可以归纳为以下1点。

前端工程师是资源生产者，承载了用户层的所有功能，不仅是客户端最终呈现给用户的成品HTML/CSS/JavaScript等资源产品，还有这些资源从从头开始到最终输出。 所有链接。

从诞生到发展，前端工程师的职位一直在变。 从“切图子”升级到“大前端”，改变的是技术职责范围，不变的是前端工程师的输出永远是用户。 这种变化不会停止，让我们来看看前端工程师未来可能的定位。

前端工程师的发展方向并不明确，但随着平台的多样化和新技术的不断涌现，前端逐渐向两个方向发展：面向Web和面向移动App。

1. 不仅仅是浏览器

在 Node.js 之前，浏览器是前端工程师唯一的“阵地”。 Node.js的出现打破了这种局面，导致了所谓“大前端”的出现。 在Node.js出现之前没有“大前端”概念的主要原因之一是当时的Web服务器端编程语言不是JavaScript。 这需要很多能量。 Node.js出现后，语言的通用性不仅降低了使用Node.js进行服务端开发的门槛，也为同构编程提供了强大的技术支持。 此外，Node.js的轻量级、非阻塞I/O、异步处理等特性非常适合微服务等特定场景。

前端工程师控制着与用户相关的所有资源（数据、逻辑、模板），可以更全面地掌控开发进度，实现更合理的前后端分离。 该模型的前端将技术范围扩展到Web服务层，可以看作是Web领域的垂直延伸。 国内外团队越来越接受这种模式。 突破浏览器，面向Web应用层的“大前端”逐渐成为前端工程师未来发展的主流方向。

2. 也不只是网络

无论是专注于浏览器端，还是兼顾Node.js中间层，前端工程师从未脱离过常规意义上的Web领域（即面向浏览器的Web）。 近年来，随着 React Native、Weex 等技术的发展，JavaScript 语言可以直接编写出接近 Native 体验的移动应用，这使得前端工程师可以探索常规 Web 以外的开发领域. 事实上，近年来，前端工程师从未停止过“入侵”移动开发领域。 以PhoneGap、Cordova、Ionic等为代表的类App开发，以及App内嵌WebView的Hybrid开发，再加上最近Google提出的PWA，甚至微信小程序和支付宝小程序等，地位前端工程师早就销声匿迹了。 它是一个纯粹的浏览器，而是一个面向各种GUI应用的泛前端领域。

移动客户端开发领域之所以不断被Web“入侵”，一方面是由于Web技术的飞速发展，比如JavaScript引擎性能的提升，浏览器和浏览器的权限越来越大- 类似浏览器的 HTML5 推广； 另一方面，由于手机操作系统政策的不断收紧。 2017年6月，苹果发布公告，禁用以JSPatch为代表的“虚假热更新”技术； 在Google I/O 2017开发者大会上，被点名并提出了以MIUI为代表的第三方Android定制系统的粗略图标。 公布任何安卓将要闭源的消息，不过这件事也让不少开发者和媒体感到不安。 所以现在的情况是：Native在不断收紧，Web在逐渐放开。 这是前端有机会和能力“跨界”进入移动App开发领域的重要前提。 虽然这个方向还处于起步阶段，谁也无法预测它真正成熟还要多久，但不可否认的是，前端的横向边界在不断延伸。

在Web自身格局不断变化的同时，其他领域的诱惑也在不断挑逗着前端不安分的触角。 虽然前端工程师未来的具体定位无法准确预测简单的前端表单验证，但无论是在Web领域还是客户端领域，前端工作的输出都是直接面向用户的，这一点在任何时代都不会改变。 秉承这一宗旨，无论角色如何变化，前端工程师始终需要坚持以下两个原则。